Importing Quill to React app throws "React is not defined", "Unexpected token import"

Question

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.

Answer 1

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

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 {

  componentDidMount() {

    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 come after the above, which registers Snow...
      placeholder: "Write something awesome..."
    });
  } //componentDidMount

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