How to require 'ace-builds/ace' with Webpack and noParse option

Question

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).

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