I'm trying to get Quill to work on my React app but depending on my webpack config it throws two errors:

Uncaught SyntaxError: Unexpected token import

or

Uncaught ReferenceError: React is not defined

Please note that I'm not using react-quill nor create-react-app.

Solving the first error produces another, I've read that I need to make an exception in webpack to allow it to import from quill folder.

exclude: /node_modules/

into

/node_modules(?!\/quill)/

Now it throws the second error.

My webpack config file:

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {   
    loaders: [{
      exclude: /node_modules(?!\/quill)/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

I'm using basic code from Quill docs to import what's needed:

import React, { Component } from 'react';

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});
class Tutorial extends Component {
    constructor(props){
        super(props);
        this.editor = null;
    }
    render(){
        return (
            <div className="verb-container">
                <div className="editor"></div>
            </div>
        );
    }
}

export default Tutorial;

When I import just:

import Quill from 'quill';

or

import Quill from 'quill/core';

A basic editor appears if I initialize it like this:

this.editor = new Quill('.editor');

But when I try to import

import Snow from 'quill/themes/snow';

It shows:

React is not defined

If I missed any important information, please let me know.

I'm trying to get Quill to work on my React app but depending on my webpack config it throws two errors:

Uncaught SyntaxError: Unexpected token import

or

Uncaught ReferenceError: React is not defined

Please note that I'm not using react-quill nor create-react-app.

Solving the first error produces another, I've read that I need to make an exception in webpack to allow it to import from quill folder.

exclude: /node_modules/

into

/node_modules(?!\/quill)/

Now it throws the second error.

My webpack config file:

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {   
    loaders: [{
      exclude: /node_modules(?!\/quill)/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

I'm using basic code from Quill docs to import what's needed:

import React, { Component } from 'react';

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});
class Tutorial extends Component {
    constructor(props){
        super(props);
        this.editor = null;
    }
    render(){
        return (
            <div className="verb-container">
                <div className="editor"></div>
            </div>
        );
    }
}

export default Tutorial;

When I import just:

import Quill from 'quill';

or

import Quill from 'quill/core';

A basic editor appears if I initialize it like this:

this.editor = new Quill('.editor');

But when I try to import

import Snow from 'quill/themes/snow';

It shows:

React is not defined

If I missed any important information, please let me know.

• javascript
• reactjs
• webpack
• quill

Share Improve this question Follow asked Apr 17, 2018 at 15:15 tssrtssr 12133 silver badges55 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Your question helped me figure out how to get Quill working in a React app, so thank you for that!

The "React is not defined" error may have nothing to do with Quill.

Possible solution here: Uncaught ReferenceError: React is not defined

For what it's worth, here is how I imported Quill into a React ponent.

Note this is using Quill in a React app, and not using the react-quill npm package.

import React from 'react';

// import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';

import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow'; //snow works, but need to import and register formats, and replace icons...

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
import Underline from 'quill/formats/underline';
import Link from 'quill/formats/link';
import List, { ListItem } from 'quill/formats/list';

import Icons from 'quill/ui/icons'; 

export default class QuillEditor extends React.Component {

  ponentDidMount() {

    Quill.register({
      'modules/toolbar': Toolbar,
      'themes/snow': Snow,
      'formats/bold': Bold,
      'formats/italic': Italic,
      'formats/header': Header,
      'formats/underline': Underline,
      'formats/link': Link,
      'formats/list': List,
      'formats/list/item': ListItem,
      'ui/icons': Icons
    });

    var icons = Quill.import('ui/icons');
    icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
    icons['italic'] = '<i class="fa fa-italic" aria-hidden="true"></i>';
    icons['underline'] = '<i class="fa fa-underline" aria-hidden="true"></i>';
    icons['link'] = '<i class="fa fa-link" aria-hidden="true"></i>';
    icons['clean'] = '<i class="fa fa-eraser" aria-hidden="true"></i>'; 

    var quill = new Quill('#editor', {
      theme: 'snow', //this needs to e after the above, which registers Snow...
      placeholder: "Write something awesome..."
    });
  } //ponentDidMount

  render() {
    return (
      <div>
          <div id="QuillEditor-container">
            {/* <!-- Create the editor container --> */}
            <div id="editor">
              <p>Hello World!</p>
              <p>Some initial <strong>bold</strong> text</p>
              <p></p>
            </div>
          </div>
      </div>
    )
  }
}