Import quill.js into Laravel using Mix/Webpack

Question

At the time of my original implementation of this, I am using Laravel 5.8, but as far as I know, this is still relevant and Larvel 7.x is out now. I'm trying to import a new javascript library into my Laravel 5.8 application using Mix. Specifically, the quill.js library.

Criticaster

Answer 1

Here are the steps I took to install quill and make it globally accessible in the application.

1

Install quill via npm

npm install quill --save-dev

---

2

Create a new file /resources/js/quill.js

---

3

In the quill.js file, I included the code that the quill documentation suggests: https://quilljs.com/guides/adding-quill-to-your-build-pipeline/

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


export default Quill;

---

4

In my app.js file, I included the quill.js file and assigned it to the global scope

require('./quill.js');

window.Quill = require('Quill');

---

5

Import the quill css in /resources/sass/app.scss

@import '~quill/dist/quill.core.css';

And for your theme

@import '~quill/dist/quill.snow.css';

---

6

Run npm run dev

Criticaster

I followed this exactly and it works perfect on localhost but when I push to my server and run npm run prod I get this error: ERROR in ./resources/js/user.js 3:15-31 Module not found: Error: Can't resolve 'Quill' in '/home/forge/sieved.co/resources/js' npm run prod works perfect locally too, any ideas? Thanks for this question btw helped me a lot. – Halve

are you sure it installed successfully? did you check your forge logs? – Criticaster

I fixed it, the issue was in app.js this line: window.Quill = require('Quill'); needed a lowercase Q like: window.Quill = require('quill'); All's working after that. – Halve

Answer 2

If you don't necessarily want to import specific Quill components and just want to emulate the behaviour from CDN, you could just:

1. Install Quill

npm i quill

2. In your resources/js/app.js

import Quill from 'Quill';

3. Attach Quill on your elements

new Quill('.quill-editor', {});

Overstudy