WebPack related error

[shane13hsi]

Hi, @zenoamaro I got an error with webpack.

Error: ./~/react-quill/~/quill/dist/quill.js
Critical dependencies:
6:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/react-quill/~/quill/dist/quill.js 6:478-485

Related code is

require('../../../../node_modules/react-quill/node_modules/quill/dist/quill.base.css');
require('../../../../node_modules/react-quill/node_modules/quill/dist/quill.snow.css');

var styles = {
      '.quill': {
          'border': '1px solid #d5d5d5'
      },
      '.ql-toolbar': {
          'box-shadow': '0 1px 10px rgba(0, 0, 0, .1)'
      },
      '.quill-contents ': {
          'height': '250px'
      }
  };

<ReactQuill
    styles={styles}
    theme="snow"
    value={data.description}
    onChange={this.onTextChange}/>

[shane13hsi]

This may be the webpack's bug. I include the quill.js in <script /> tag, rather than require('quill') to fix the issue.

[zenoamaro]

Quill specifies the precompiled distributable as its main script, but that shouldn't generate an error, rather a warning such as this:

WARNING in ./~/react-quill/~/quill/dist/quill.js
Critical dependencies:
6:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/react-quill/~/quill/dist/quill.js 6:478-485

Which is unfortunate, but not under my control, as quill doesn't ship src in its package. But it shouldn't affect ReactQuill in any other way. Can you share deps versions and a bit more of your build step so to investigate why that's failing?

Also, I'm understanding that you are requiring quill, but if that's the case you shouldn't need to do that yourself. The QuillMixin does that for you. Just require react-quill, and don't specify quill as a dependency (unless you --optimize-dedupe it).

Try, and let me know if that fixes it.

By the way, you can use module.noParse in your webpack config to silence the warning:

module: {
    noParse: /node_modules\/quill/
}

[shane13hsi]

HI, @zenoamaro. My webpack config is from https://github.com/steida/este/blob/master/webpack/makeconfig.js, with this line devtool: isDevelopment ? 'eval' : 'source-map', changed. In development mode, webpack just generated a warning. But when I tried to gulp build-webpack-production, webpack got an error and interrupted.

Yes, I did not require('quill') directly. I think webpack got an error because of this line https://github.com/zenoamaro/react-quill/blob/master/src/mixin.js#L3. I had to remove this line to avoid the build errors.

[zenoamaro]

Ah, you can see here that Este is throwing on warnings in production:

este/webpack/build.js:12

webpack(webpackConfig, function(fatalError, stats) {
  var jsonStats = stats.toJson();
  var buildError = fatalError || jsonStats.errors[0] || jsonStats.warnings[0];

  if (buildError)
    throw new gutil.PluginError('webpack', buildError);

This may be questionable or not, depending on your preferences on the matter, but it is not a fault in react-quill, rather quill's for distributing a minified script as its main.

I can see two things that you could do:

• Avoid throwing on warnings during a production build by changing the code shown above (questionable), or

• Avoid parsing dist/quill.js by adding module.noParse to the webpack config:

  este/webpack/makeconfig.js:63

  module: {
    noParse: /node_modules\/quill/,
    loaders: [{
      loader: 'url-loader?limit=100000',
      test: /\.(gif|jpg|png|woff|woff2|eot|ttf|svg)$/
    }, {
      exclude: /node_modules/,

I highly recommend you follow the second suggestion, as that is the right way to feed pre-built scripts to webpack, and would allow you to keep a warning-free production build, or at least handle the issue explicitly.

Anyway, closing this as it's not something that can be solved inside react-quill. Thanks for the report, and let me know if this worked for you.

[shane13hsi]

Thank you @zenoamaro for your kind explanation. It's worked.

I like the source code of react-quill. It's very easy to read and a good material to learn how to wrap the other-world javascript.

And thank you for introducing the hidden parts of webpack.

[zenoamaro]

Thanks! And remember that, if you like this library, contributions for missing features or bugs are always welcome!

[taylorjames]

When using

module: {
    noParse: /node_modules\/quill/,
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
      { test: /\.json$/, loader: 'json-loader'},
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css!autoprefixer!rework'/*,
        {
          publicPath: '/public/css/'
        }*/
      )},
      { test: /\.(jpg)$/, loader: 'file-loader' },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=10000' }
    ]
  },

The app will error out saying that require is not defined in /node_modules/react-quill/quill/index.js

This is because module.noParse expects to have no call to require, define or similar : module.noparse

I changed noParse to /node_modules/quill/dist/ to fix the error.

@zenoamaro are you aware of this?

[zenoamaro]

Thanks for noticing. Yes, it makes sense to limit noParse to dist exactly for the reasons you wrote.

I added a note about this on the README.

[tamagokun]

If you are requiring any of the css files from the quill dist, you'll get more webpack errors complaining about require being undefined:

require('react-quill/node_modules/quill/dist/quill.snow.css')

To fix this, I had to update the noParse regex to target quill.js rather than the dist folder.

[HCorte]

Hi, @zenoamaro I am trying to use react-quill by using react-quill.js but throws me a error at Quill: Potentially unhandled rejection [2] TypeError: Quill is not a function

'use strict';

var Quill = __webpack_require__(/*! quill */ 5);

var QuillMixin = {

    /**
    Creates an editor on the given element. The editor will
    be passed the configuration, have its events bound,
    */
    createEditor: function($el, config) {
        var editor = new Quill($el, config);<---error that is thrown

Not using webpack, most likely the reason its showing this error.... is there a file that can include to use react-quill where I don't need to use webpack, simply don't know how use it... help would be much appreciated...

in case of using react-quill.min.js the error is:
Potentially unhandled rejection [2] TypeError: o is not a function
at var r=new o(e,t);

[markmiller21]

@tamagokun What did you end up using as your REGEX statement? I've been struggling with this and can't find a statement that will remove this warning. I would think it would be
noParse: /node_modules\/react-quill\/node_modules\/quill\/dist\/quill.js/
But that still threw me an error. Should I be using wildcards instead of the node_modules?

[tamagokun]

@markmiller21 here's what I used:

noParse: /node_modules\/quill\/dist\/quill\.js/,

Looks like you just need to escape your "." since it is a special char in regex.

[ordinarygithubuser]

None of these regex works for me. This is the modules section of my webpack configuration:

module: {
  noParse: /node_modules\/quill\/dist/,
  loaders: [{
    test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['react-hot-loader', 'babel']
  }, {
    test: /\.sass|\.css/,
    loaders: [ 'style', 'css', 'sass' ]
  }]
}

Did something change in he meantime or am I the only one still getting this warning?

[craigklem]

Are you on Windows? We had issue with regex as well and changed like so:

var path = require('path');
...
  module: {
    noParse: [
      path.resolve('node_modules/react-quill/node_modules/quill/dist/quill.js'), //npm 2
      path.resolve('node_modules/quill/dist/quill.js') //npm 3
    ],

[ordinarygithubuser]

Yes I'm on windows and it worked. Thanks! :)

[satyadeeproat]

I am on Linux and still getting the error

.//quill/dist/quill.js
Critical dependencies:
6:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ .//quill/dist/quill.js 6:478-485

[magalhini]

@tamagokun 's solution was all the fix I needed in our project! I'm amazed at how hard it was to get thist to work out of the box (well, almost) with Webpack. Thanks!