I'm currently trying to require ace-builds (installed from bower) with webpack. Since it's a huge lib, I'm adding the whole folder to noParse option. I'm running webpack with -d option on terminal.

The problem is: when my code tries to require it, it is an empty object. Also, it's not loaded by the browser. Here are some information of what I'm doing:

My file:

// custom_editor.js
// ace-builds are aliased by ace keyword
var Ace = require('ace/ace');  // This is an empty Object when I'm debugging with breakpoints

Config file:

// webpack.config.js
var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: {
    form: path.join(__dirname, 'static/main_files/form.js'),
    vendor: [
      'jquery',
      'react',
      'underscore',
      'query-string',
      'react-dnd',
      'react-select-box'
    ]
  },
  output: {
    path: path.join(__dirname, 'static/bundle'),
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx$/,
      loader: 'jsx-loader?insertPragma=React.DOM'
    }],
    noParse: [
      /ace-builds.*/
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: [
      __dirname,
      path.join(__dirname, 'static'),
      path.join(__dirname, 'node_modules')
    ],
    alias: {
      jQueryMask: 'node_modules/jquery-mask-plugin/dist/jquery.mask',
      twbsDropdown: 'node_modules/bootstrap-sass/assets/javascripts/bootstrap/dropdown',
      'twbs-datetimepicker': 'node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker',
      ace: 'bower_components/ace-builds/src',
      'select-box': 'node_modules/react-select-box/lib/select-box',
      queryString: 'node_modules/query-string/query-string',
      moment: 'node_modules/moment/moment'
    }
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    })
  ]
};

It was not loaded on Chrome's Network panel

It is showing on Chrome's Sources panel (Don't know why because no ace.map file were loaded either)

Really running out of ideas of what I'm doing wrong here. Is there any good example that I can clone and test? (It can be another lib as well).

I'm currently trying to require ace-builds (installed from bower) with webpack. Since it's a huge lib, I'm adding the whole folder to noParse option. I'm running webpack with -d option on terminal.

The problem is: when my code tries to require it, it is an empty object. Also, it's not loaded by the browser. Here are some information of what I'm doing:

My file:

// custom_editor.js
// ace-builds are aliased by ace keyword
var Ace = require('ace/ace');  // This is an empty Object when I'm debugging with breakpoints

Config file:

// webpack.config.js
var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: {
    form: path.join(__dirname, 'static/main_files/form.js'),
    vendor: [
      'jquery',
      'react',
      'underscore',
      'query-string',
      'react-dnd',
      'react-select-box'
    ]
  },
  output: {
    path: path.join(__dirname, 'static/bundle'),
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx$/,
      loader: 'jsx-loader?insertPragma=React.DOM'
    }],
    noParse: [
      /ace-builds.*/
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: [
      __dirname,
      path.join(__dirname, 'static'),
      path.join(__dirname, 'node_modules')
    ],
    alias: {
      jQueryMask: 'node_modules/jquery-mask-plugin/dist/jquery.mask',
      twbsDropdown: 'node_modules/bootstrap-sass/assets/javascripts/bootstrap/dropdown',
      'twbs-datetimepicker': 'node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker',
      ace: 'bower_components/ace-builds/src',
      'select-box': 'node_modules/react-select-box/lib/select-box',
      queryString: 'node_modules/query-string/query-string',
      moment: 'node_modules/moment/moment'
    }
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    })
  ]
};

It was not loaded on Chrome's Network panel

It is showing on Chrome's Sources panel (Don't know why because no ace.map file were loaded either)

Really running out of ideas of what I'm doing wrong here. Is there any good example that I can clone and test? (It can be another lib as well).

• javascript
• ace-editor
• webpack

• 1 I've done a workaround with { externals: { 'ace/ace': 'ace } }, but I need to add a <script> tag with the path of ace, for example, <script src="/static/bower_components/ace-builds/src-min/ace.js"></script> - not optimal solution but at least works. – gabrielhpugliese Commented Apr 16, 2015 at 20:37
• Having the same issue. That was the solution? – U Avalos Commented Sep 11, 2015 at 21:07
• Yes. I haven't touch the code since that. Someone said to use brace, but I haven't tried. – gabrielhpugliese Commented Sep 13, 2015 at 3:59

1 Answer 1

Use brace. It's a browserify compatible version of the ace editor which also works with webpack. Version 0.5.1 is using ace 1.1.9.

https://github.com/thlorenz/brace