@jefflewis Apakah Anda menggunakan webpack untuk memaketkan? atau sesuatu yang lain? Ini disebabkan oleh brace tidak ditentukan. Mungkin ini adalah masalah kompilasi tetapi saya pikir saya perlu sedikit lebih banyak info tentang pengaturan Anda terlebih dahulu untuk mencoba mereproduksi.

Ya, saya menggunakan webpack dengan rel untuk memuat aplikasi saya. Saya menempelkan titik debugger ke ace.js tepat sebelum brace.default dipanggil, dan dapat mengonfirmasi bahwa itu tidak ditentukan.

Saya memperhatikan bahwa setelah menjalankan yarn install dari direktori proyek saya, dan menavigasi ke ./node_modules/react-ace bahwa direktori react-ace node_modules kosong. Mencoba untuk yarn install atau npm install dari dalam direktori react-ace gagal dengan kesalahan sintaks karena tidak dapat mengkompilasi kode ...style di kedua app.js dan split.js . Menghapus ini mengakibatkan kegagalan untuk mengkompilasi bagian pertama kode JSX di app.js dan split.js (di dalam metode render).

Saya telah menguraikan konfigurasi paket web saya di bawah ini. Beri tahu saya jika saya bisa membantu menyelesaikan masalah ini.

Berikut ini adalah konfigurasi paket web saya:

• shared.js (berisi konfigurasi bersama antar lingkungan)
• development.js (konfigurasi khusus lingkungan dev)
• configuration.js (konfigurasi dasar)

Pemuat saya termasuk babel:

./loaders/babel.js

module.exports = {
  test: /\.js(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

./shared.js

// Note: You must restart bin/webpack-dev-server for changes to take effect

/* eslint global-require: 0 */
/* eslint import/no-dynamic-require: 0 */

const webpack = require('webpack')
const { basename, dirname, join, relative, resolve } = require('path')
const { sync } = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const extname = require('path-complete-extname')
const { env, settings, output, loadersDir } = require('./configuration.js')

const extensionGlob = `**/*{${settings.extensions.join(',')}}*`
const entryPath = join(settings.source_path, settings.source_entry_path)
const packPaths = sync(join(entryPath, extensionGlob))

module.exports = {
  entry: packPaths.reduce(
    (map, entry) => {
      const localMap = map
      const namespace = relative(join(entryPath), dirname(entry))
      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
      return localMap
    }, {}
  ),

  output: {
    filename: '[name].js',
    path: output.path,
    publicPath: output.publicPath
  },

  module: {
    rules: sync(join(loadersDir, '*.js')).map(loader => require(loader))
  },

  plugins: [
    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
    new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
    new ManifestPlugin({
      publicPath: output.publicPath,
      writeToFileEmit: true
    })
  ],

  resolve: {
    extensions: settings.extensions,
    modules: [
      resolve(settings.source_path),
      'node_modules'
    ]
  },

  resolveLoader: {
    modules: ['node_modules']
  }
}

./development.js

// Note: You must restart bin/webpack-dev-server for changes to take effect
var fs = require('fs')

const merge = require('webpack-merge')
const sharedConfig = require('./shared.js')
const { settings, output } = require('./configuration.js')

module.exports = merge(sharedConfig, {
  devtool: 'cheap-eval-source-map',

  stats: {
    errorDetails: true
  },

  output: {
    pathinfo: true
  },

  devServer: {
    clientLogLevel: 'none',
    https: settings.dev_server.https,
    host: settings.dev_server.host,
    port: settings.dev_server.port,
    contentBase: output.path,
    publicPath: output.publicPath,
    compress: true,
    headers: { 'Access-Control-Allow-Origin': '*' },
    historyApiFallback: true,
    watchOptions: {
      ignored: /node_modules/
    },
    https: {
      key: fs.readFileSync('/projects/cohub/cohub-key.pem'),
      cert: fs.readFileSync('/projects/cohub/cohub-cert.pem')
    }
  }
})

./configuration.js

// Common configuration for webpacker loaded from config/webpacker.yml

const { join, resolve } = require('path')
const { env } = require('process')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')

const configPath = resolve('config', 'webpacker.yml')
const loadersDir = join(__dirname, 'loaders')
const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]

function removeOuterSlashes(string) {
  return string.replace(/^\/*/, '').replace(/\/*$/, '')
}

function formatPublicPath(host = '', path = '') {
  let formattedHost = removeOuterSlashes(host)
  if (formattedHost && !/^http/i.test(formattedHost)) {
    formattedHost = `//${formattedHost}`
  }
  const formattedPath = removeOuterSlashes(path)
  return `${formattedHost}/${formattedPath}/`
}

const output = {
  path: resolve('public', settings.public_output_path),
  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
}

module.exports = {
  settings,
  env,
  loadersDir,
  output
}

Akhirnya, package.json saya:

package.json

{
  "dependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-loader": "7.x",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "glob": "^7.1.2",
    "js-yaml": "^3.8.4",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.5",
    "postcss-smart-import": "^0.7.4",
    "precss": "^1.4.0",
    "prop-types": "^15.5.10",
    "rails-erb-loader": "^5.0.1",
    "react": "^15.5.4",
    "react-ace": "^5.0.1",
    "react-apollo": "^1.4.2",
    "react-dom": "^15.5.4",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.5",
    "semantic-ui-react": "^0.70.0",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "babel-plugin-relay": "^1.1.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "webpack-dev-server": "^2.4.5"
  }
}

👍 Dapat mengonfirmasi hal ini terjadi pada saya juga meskipun saya tidak tahu apakah ini masalah dengan cara rails menjalankan paket web atau apakah itu perpustakaan ini. Saya menggunakan benang untuk menginstal react-ace lalu saya menggunakan react-ace dalam dua javascript / paket yang berbeda. Yang pertama berfungsi tetapi yang kedua gagal dengan kesalahan acequire.

1 untuk saya. Saya mencapai ini pada 5.1 dengan pengaturan webpacker rel dasar.

Ini mungkin terkait dengan rel, mungkin juga tidak. Saya akan mencoba mereproduksi dengan menyiapkan lingkungan rel. apakah ada di antara Anda @jimmybaker @frostpuppet @jefflewis mencoba menginstal brace secara terpisah melalui npm dan melihat apakah itu menyelesaikan masalah?

Saya telah memasang brace secara terpisah, sehingga tidak ada perubahan perilaku.

Saya menggunakan webpacker dan Rails 5.1.4 dengan react-ace versi 5.8.0
Saya melihat masalah yang sama ini dan telah mencoba menghapus semuanya dan membersihkan cache tetapi masalah tetap muncul. Satu-satunya perbedaan minimal saya dalam penyiapan adalah bahwa saya menjalankan versi bercabang brace untuk menggunakan mode & tema kustom.
Saat ini menggunakan rails-ace-ap di luar React tanpa masalah.

@securingsincity Menghabiskan satu jam untuk

Saya mencoba memasang brace secara terpisah yang tidak memperbaiki masalah. Catatan lain adalah ini adalah aplikasi node tempat saya bekerja dan bukan aplikasi rel.

Dalam berkas lib / ace.js yang merupakan titik masuk, jika Anda melakukan langkah debugger, Anda dapat melihat bahwa require tidak ditentukan. Sayangnya ini tidak membuang kesalahan, ini memungkinkan skrip untuk terus berjalan. Ketika mencapai _interopRequireDefault itu menciptakan _brace2.default dan memberikan hasil require('brace') untuk itu. Dalam kasus ini, hasil dari require('brace') tidak terdefinisi. Menghabiskan waktu bermain-main dengan konfigurasi webpack tanpa hasil. Hanya beberapa informasi bermanfaat. Tidak ada solusi nyata.

@securingsincity Saya bisa mendapatkan rollup kustom editor kode yang bekerja dengan kode di bawah ini & brace lib. Perhatikan (typeof window !== 'undefined') kondisional. Jika Anda menghapusnya atau mencoba sesuatu yang berbeda, hampir selalu macet. Saya belum menggali cukup dalam untuk sepenuhnya memahami mengapa ini terjadi. Tidak yakin apakah ini akan membantu proses debugging, hanya ingin berbagi cara jank saya bisa mendapatkan brace / ace untuk dirender di lingkungan React dalam Rails.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

if (typeof window !== 'undefined') {
  const ace = require('brace');
}

class CodeEditor extends Component {
  componentDidMount() {
    if (typeof window !== 'undefined') {
      const {
        editorId,
        onChange,
        setReadOnly,
        setValue,
        setOptions,
        theme,
        mode,
        enableBasicAutocompletion,
        enableLiveAutocompletion,
      } = this.props;

      require(`brace/mode/${mode}`);
      require(`brace/theme/${theme}`);

      const editor = ace.edit(editorId);
      ace.require('ace/ext/language_tools');
      this.editor = editor;
      editor.getSession().setMode(`ace/mode/${mode}`);
      editor.setTheme(`ace/theme/${theme}`);
      editor.on('change', e => onChange(editor.getValue(), e));
      editor.setReadOnly(setReadOnly);
      editor.setValue(setValue);
      editor.$blockScrolling = Infinity;
      editor.setOptions({
        enableBasicAutocompletion,
        enableLiveAutocompletion,
        ...setOptions,
      });
    }
  }

  shouldComponentUpdate() {
    return false;
  }

  render() {
    const { className, style, editorId } = this.props;

    return (
      <div id={editorId} style={style} className={className}></div>
    );
  }
}

CodeEditor.propTypes = {
  editorId: PropTypes.string,
  className: PropTypes.string,
  onChange: PropTypes.func,
  setReadOnly: PropTypes.bool,
  enableBasicAutocompletion: PropTypes.bool,
  enableLiveAutocompletion: PropTypes.bool,
  setValue: PropTypes.string,
  theme: PropTypes.string,
  mode: PropTypes.string,
  style: PropTypes.object,
  setOptions: PropTypes.object,
};

CodeEditor.defaultProps = {
  editorId: 'ace-editor',
  className: '',
  onChange: () => {}, // (value, event)
  setValue: '',
  setReadOnly: false,
  theme: 'github',
  mode: 'javascript',
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true,
  style: {
    height: '300px',
    width: '400px',
  },
  setOptions: {},
};

export default CodeEditor;

Saya tidak tahu apakah ini sama sekali tidak relevan, jadi saya minta maaf jika ...

Tapi, saya memiliki masalah yang sama dengan menggunakan swagger-editor yang menyematkan kartu as.
Saya memiliki aplikasi vaadin yang bekerja dengan baik dengan swagger-editor tertanam, kecuali saya juga menggunakan addon vaadin "aceeditor" yang menggabungkan versi lain dari ACE. Setelah versi itu dimuat pertama kali dalam aplikasi saya, swagger-editor memutuskan:
TypeError Tidak Tertangkap: Tidak dapat membaca properti 'acequire' dari tidak ditentukan
di Object.(swagger-editor-bundle.js: 173)

Jika saya belum menggunakan ACE versi lain dari addon ini, ini berfungsi dengan baik.

Di sisi lain, versi tersebut rusak (pendengar pada perubahan teks tidak dipanggil) jika swagger-editor telah dimuat terlebih dahulu.

Dalam semua kasus, memuat ulang browser menggunakan F5 menyebabkan swagger-editor atau aceeditor vaadin addon bekerja kembali jika komponen yang berlawanan ditampilkan terlebih dahulu.

Hai semua mengingat sudah cukup lama dan tidak ada aktivitas tentang masalah ini, saya menutupnya.