@jefflewis您是否正在使用webpack捆绑？ 或者是其他东西？ 这是由于未定义brace引起的。 也许这是一个编译问题，但我想我首先需要有关您的设置的更多信息才能尝试进行复制。

是的，我正在将webpack与rails一起使用来加载我的应用程序。 我在调用brace.default之前就在ace.js插入

我确实注意到，从项目目录运行yarn install并导航到./node_modules/react-ace ， react-ace的node_modules目录为空。 从react-ace目录中尝试yarn install或npm install失败，并出现语法错误，即无法在两个app.js编译...style代码app.js和split.js 。 删除此选项将导致无法在app.js和split.js的第一段JSX代码中进行编译（在render方法内部）。

我在下面概述了我的Web Pack配置。 让我知道我是否可以帮助您解决此问题。

以下是我的Web Pack配置：

• shared.js（包含环境之间的共享配置）
• development.js（特定于开发环境的配置）
• configuration.js（基本配置）

我的装载机包括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
}

最后，我的package.json：

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"
  }
}

👍即使我无法确定这是Rails如何运行Web Pack的问题还是该库，也可以确认发生在我身上。 我用yarn来安装react-ace，然后在两个不同的javascript / packs中使用react-ace。 第一个有效，但第二个失败，出现acequire错误。

为我+1。 我通过基本的Rails Webpacker设置在5.1上实现了这一目标。

这可能与铁轨有关，可能与铁轨无关。 我将尝试通过设置Rails环境来重现。 你们中有人@jimmybaker @frostpuppet @jefflewis尝试通过npm分别安装brace ，看看是否能解决问题吗？

我已经单独安装了支撑，因此行为没有任何变化。

我正在将webpacker和Rails 5.1.4与版本5.8.0的react-ace一起使用
我看到了同样的问题，并尝试删除所有内容并清除缓存，但是仍然出现问题。 我在设置上的唯一最小差异是我正在运行brace的派生版本，以便使用自定义模式和主题。
目前在React之外使用rails-ace-ap都没有问题。

@securingsincity花了一个小时的时间来调试它。 在我看来，有某种方式将react-ace捆绑在一起，而父项目则无法使用。

我确实尝试单独安装brace不能解决问题。 另一个注意事项是这是我正在使用的节点应用程序，而不是Rails应用程序。

在作为入口的lib / ace.js文件中，如果对此进行了一步调试，则可以看到未定义require 。 不幸的是，这不会引发错误，它允许脚本不断变化。 当到达_interopRequireDefault它将创建_brace2.default并将require('brace')的结果分配给它。 在这种情况下， require('brace')是不确定的。 花了一些时间玩webpack配置，但没有结果。 只是一些有用的信息。 没有真正的解决方案。

@securingsincity我可以使用以下代码和大括号lib来获得代码编辑器的自定义汇总。 请注意(typeof window !== 'undefined')条件。 如果删除它们或尝试其他操作，几乎总是会崩溃。 我还没有深入到足以完全理解为什么的原因。 不确定这是否有助于调试过程，只是想分享一种简陋的方式，使我能够在Rails环境中的React中获得支撑/ ace。

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;

我不知道这是否完全无关紧要，所以我很抱歉。

但是，使用嵌入ace的swagger-editor也存在相同的问题。
我有一个vaadin应用程序，它可以与嵌入式swagger-editor一起正常工作，除非我还使用捆绑了另一个版本ACE的vaadin插件“ aceeditor”。 该版本首先在我的应用程序中加载后，swagger-editor会出现以下问题：
未捕获的TypeError：无法读取未定义的属性“ acequire”
在对象。（swagger-editor-bundle.js：173）

如果我没有使用此插件中的其他版本的ACE，则可以正常工作。

另一方面，如果先加载了swagger-editor，则该版本会中断（不调用有关文本更改的侦听器）。

在所有情况下，如果首先显示相反的组件，则使用F5重新加载浏览器会导致swagger-editor或aceeditor vaadin插件再次工作。

大家好，因为已经有一段时间了，而且在这个问题上没有任何活动，所以我要关闭它。