Search code examples
ruby-on-railsnpmwebpackquill

How to install Quill dev 2.0 with NPM, Webpacker, and Rails?

Having issues getting Quilljs Dev 2.0 working with my rails project. Vanilla Quilljs works just fine, but when I install quill-2.0-dev via npm, and import it in Webpacker, I get Unexpected token '!'

Errors in console:

enter image description here enter image description here

app/javascript/packs/quill-editor.js

import Quill from 'quill-2.0-dev'
export default Quill;

window.onload = () => {

const quill = new Quill('#editor', {
    modules: {
        toolbar: {
            container: '#toolbar'
        }
    },
    placeholder: 'Compose a document...',
    theme: 'snow'
});
};

package.json

  "dependencies": {
"@babel/core": "^7.11.1",
"@client-side-validations/client-side-validations": "^0.1.4",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.2-1",
"@rails/webpacker": "^4.0.7",
"boxicons": "^2.0.4",
"i": "^0.3.6",
"jquery": "^3.4.1",
"npm": "^6.14.8",
"quill-2.0-dev": "^2.0.0-dev.3",
"quill-blot-formatter": "^1.0.5",
"quill-emoji": "^0.1.7",
"turbolinks": "^5.2.0"

},

Update

When I try it with the require keyword:

const Quill = require('quill-2.0-dev');

I get this error: enter image description here

but as you can see, it's in my package.json (above)

Solution

  • Follow this step it may help

    # Add package from yarn
yarn add quill-2.0-dev

# Import module in app/javascript/packs/application.js 

import Quill from 'quill-2.0-dev/core'
import Toolbar from 'quill-2.0-dev/modules/toolbar'
import Snow from 'quill-2.0-dev/themes/snow';
import Bold from 'quill-2.0-dev/formats/bold';
import Italic from 'quill-2.0-dev/formats/italic';
import Header from 'quill-2.0-dev/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});

# Init

window.onload = function() {
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
}

# In view

<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

    Flowing the docs