react-quill: WebPack related error

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

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 17 (4 by maintainers)

Most upvoted comments

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
    ],

craigklem on Mar 21, 2016

@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!

magalhini on Apr 21, 2017

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

tamagokun on Feb 9, 2016

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.

tamagokun on Sep 29, 2015

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?

taylorjames on Sep 22, 2015