Importing Quill To React App Throws "react Is Not Defined", "unexpected Token Import"

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 ReferenceErro

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

importReactfrom'react';

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

importQuillfrom'quill/core';
importToolbarfrom'quill/modules/toolbar';
importSnowfrom'quill/themes/snow'; //snow works, but need to import and register formats, and replace icons...importBoldfrom'quill/formats/bold';
importItalicfrom'quill/formats/italic';
importHeaderfrom'quill/formats/header';
importUnderlinefrom'quill/formats/underline';
importLinkfrom'quill/formats/link';
importList, { ListItem } from'quill/formats/list';

importIconsfrom'quill/ui/icons'; 

exportdefaultclassQuillEditorextendsReact.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 = newQuill('#editor', {
      theme: 'snow', //this needs to come after the above, which registers Snow...placeholder: "Write something awesome..."
    });
  } //componentDidMountrender() {
    return (
      <div><divid="QuillEditor-container">
            {/* <!-- Create the editor container --> */}
            <divid="editor"><p>Hello World!</p><p>Some initial <strong>bold</strong> text</p><p></p></div></div></div>
    )
  }
}