14

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

Object {}

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

Network

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

Sources

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

gabrielhpugliese
  • 2,588
  • 19
  • 19
  • 1
    I've done a workaround with { externals: { 'ace/ace': 'ace } }, but I need to add a - not optimal solution but at least works. – gabrielhpugliese Apr 16 '15 at 20:37
  • Having the same issue. That was the solution? – U Avalos Sep 11 '15 at 21:07
  • Yes. I haven't touch the code since that. Someone said to use brace, but I haven't tried. – gabrielhpugliese Sep 13 '15 at 03:59

1 Answers1

23

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

U Avalos
  • 6,538
  • 7
  • 48
  • 81
  • I have a size issue with this. It's add 15MB to the build in dev mode and 3MB in production mode. I'm sure we can do better using ace as external – toutpt Aug 10 '17 at 08:56
  • 2
    Brace has huge issues with custom modes and hasn't been updated in a while. Still works for barebones setups. – Caleb Jay Apr 18 '18 at 23:38
  • 4
    Ace is now at version 1.3.3 so I don't think brace is a viable option any more... :( – MattCochrane Apr 29 '18 at 13:19