Primeng: EXCEPTION: ReferenceError: Quill is not defined

Created on 29 Aug 2016  路  25Comments  路  Source: primefaces/primeng

I try to use Editor and got this error:
browser_adapter.js:84 ReferenceError: Quill is not defined at Editor.ngAfterViewInit (http://localhost:3000/assets/back/js/main.bundle.js:57834:27) at AppView._View_Block13.detectChangesInternal (Block.ngfactory.js:1631:77) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_Block1.detectChangesInternal (Block.ngfactory.js:340:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_Block0.detectChangesInternal (Block.ngfactory.js:35:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_Block16.detectChangesInternal (Block.ngfactory.js:1833:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_Block1.detectChangesInternal (Block.ngfactory.js:340:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_Block0.detectChangesInternal (Block.ngfactory.js:35:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_ContentRedactor0.detectChangesInternal (ContentRedactor.ngfactory.js:103:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_FaqShowComponent0.detectChangesInternal (FaqShowComponent.ngfactory.js:308:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_FaqShowComponent_Host0.detectChangesInternal (FaqShowComponent.ngfactory.js:30:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectContentChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58501:20) at AppView._View_MainComponent0.detectChangesInternal (MainComponent.ngfactory.js:211:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at AppView.detectViewChildrenChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58509:20) at AppView._View_MainComponent_Host0.detectChangesInternal (MainComponent.ngfactory.js:30:8) at AppView.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:58483:15) at ViewRef_.detectChanges (http://localhost:3000/assets/back/js/vendor.bundle.js:43472:66) at http://localhost:3000/assets/back/js/vendor.bundle.js:28806:85 at Array.forEach (native) at ApplicationRef_.tick (http://localhost:3000/assets/back/js/vendor.bundle.js:28806:39) at http://localhost:3000/assets/back/js/vendor.bundle.js:28710:106 at ZoneDelegate.invoke (http://localhost:3000/assets/back/js/polyfills.bundle.js:8126:30) at Object.onInvoke (http://localhost:3000/assets/back/js/vendor.bundle.js:47172:42) at ZoneDelegate.invoke (http://localhost:3000/assets/back/js/polyfills.bundle.js:8125:36) at Zone.run (http://localhost:3000/assets/back/js/polyfills.bundle.js:8019:45) at NgZoneImpl.runInner (http://localhost:3000/assets/back/js/vendor.bundle.js:47203:72) at NgZone.run (http://localhost:3000/assets/back/js/vendor.bundle.js:31444:67) at Object.next (http://localhost:3000/assets/back/js/vendor.bundle.js:28710:82) at SafeSubscriber.schedulerFn [as _next] (http://localhost:3000/assets/back/js/vendor.bundle.js:30614:71) at SafeSubscriber.__tryOrUnsub (http://localhost:3000/assets/back/js/vendor.bundle.js:501:17) at SafeSubscriber.next (http://localhost:3000/assets/back/js/vendor.bundle.js:450:23) at Subscriber._next (http://localhost:3000/assets/back/js/vendor.bundle.js:403:27) at Subscriber.next (http://localhost:3000/assets/back/js/vendor.bundle.js:367:19) at EventEmitter.Subject.next (http://localhost:3000/assets/back/js/vendor.bundle.js:2505:26) at EventEmitter.emit (http://localhost:3000/assets/back/js/vendor.bundle.js:30602:77) at NgZone._checkStable (http://localhost:3000/assets/back/js/vendor.bundle.js:31354:45) at NgZoneImpl.onLeave (http://localhost:3000/assets/back/js/vendor.bundle.js:31326:24) at Object.onInvokeTask (http://localhost:3000/assets/back/js/vendor.bundle.js:47166:32) at ZoneDelegate.invokeTask (http://localhost:3000/assets/back/js/polyfills.bundle.js:8158:44) at Zone.runTask (http://localhost:3000/assets/back/js/polyfills.bundle.js:8059:49) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/assets/back/js/polyfills.bundle.js:8227:35)

I add this in my module like this:
import {EditorModule,SharedModule} from 'primeng/primeng';

what am I doing wrong?

picture SamoilenkoEvgeniy

Most helpful comment

Hi, the following steps worked for me:

first include the modules like mentioned on the primeNg page:
@NgModule({ imports: [ SharedModule, EditorModule,

plus the imports of course
import {EditorModule} from "primeng/components/editor/editor"; import {SharedModule} from "primeng/components/common/shared";

next steps i did to make it work:
npm install quill --save
npm install @types/quill --save

and like mfalzetta mentioned before, adding the scripts and styles to
angular-cli.json
"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ], "scripts": [ "../node_modules/quill/dist/quill.js" ],
After that it was working fine for me!
Did not have to do anything with webpack so far...

Greetings

picture jwiesmann on 22 Feb 2017
👍10 ❤3 🎉1

All 25 comments

Quill.js is a dependency for the editor component. Have you included this in your project?

kcaebe picture kcaebe on 2 Sep 2016

yes, I include through quill.js webpack.

SamoilenkoEvgeniy picture SamoilenkoEvgeniy on 4 Sep 2016

All you had to do - set the Quill through typings.
tnx.

SamoilenkoEvgeniy picture SamoilenkoEvgeniy on 12 Sep 2016

@SamoilenkoEvgeniy How did you do it in webpack? thank you!

smyth64 picture smyth64 on 22 Sep 2016

@smith64fx sorry for delay,

its very simply:

new webpack.ProvidePlugin({ Quill: "Quill" }),

you also need install quill throught typings, like this:

typings install dt~quill --save --global

SamoilenkoEvgeniy picture SamoilenkoEvgeniy on 3 Oct 2016
❤4 👍4

@SamoilenkoEvgeniy thank you SO much! :)

rinogo picture rinogo on 27 Oct 2016

Hi, for me does not work.

I performe this steps:

Install
npm install quill --save

angular-cli.json
"scripts": [... "../node_modules/quill/dist/quill.js"],
"styles": [ ... "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css"],

And now
new webpack.ProvidePlugin({ Quill: "Quill" }),
typings install dt~quill --save --global

And i have this error:

ReferenceError: Quill is not defined
at Editor.webpackJsonp../node_modules/primeng/components/editor/editor.js.Editor.ngAfterViewInit (editor.js:34)
at proxyViewClass.View_AgendaDialogComponent0.detectChangesInternal (/SmartnotewebAgendaModule/AgendaDialogComponent/component.ngfactory.js:826)
at proxyViewClass.t.detectChanges (vendor.dll.js:1938)
at proxyViewClass.e.detectChanges (vendor.dll.js:1938)
at proxyViewClass.t.internalDetectChanges (vendor.dll.js:1938)
at proxyViewClass.View_AgendaDialogComponent_Host0.detectChangesInternal (/SmartnotewebAgendaModule/AgendaDialogComponent/host.ngfactory.js:29)
at proxyViewClass.t.detectChanges (vendor.dll.js:1938)
at proxyViewClass.e.detectChanges (vendor.dll.js:1938)
at t.detectChangesInNestedViews (vendor.dll.js:1945)
at proxyViewClass.View_FooterComponent0.detectChangesInternal (/SmartnotewebAppModule/FooterComponent/component.ngfactory.js:86)
at proxyViewClass.t.detectChanges (vendor.dll.js:1938)
at proxyViewClass.e.detectChanges (vendor.dll.js:1938)
at proxyViewClass.t.internalDetectChanges (vendor.dll.js:1938)
at proxyViewClass.View_JhiMainComponent0.detectChangesInternal (/SmartnotewebAppModule/JhiMainComponent/component.ngfactory.js:105)
at proxyViewClass.t.detectChanges (vendor.dll.js:1938)

Someone can help me?

mfalzetta picture mfalzetta on 21 Feb 2017

Hi, the following steps worked for me:

first include the modules like mentioned on the primeNg page:
@NgModule({ imports: [ SharedModule, EditorModule,

plus the imports of course
import {EditorModule} from "primeng/components/editor/editor"; import {SharedModule} from "primeng/components/common/shared";

next steps i did to make it work:
npm install quill --save
npm install @types/quill --save

and like mfalzetta mentioned before, adding the scripts and styles to
angular-cli.json
"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ], "scripts": [ "../node_modules/quill/dist/quill.js" ],
After that it was working fine for me!
Did not have to do anything with webpack so far...

Greetings

jwiesmann picture jwiesmann on 22 Feb 2017
👍10 ❤3 🎉1

@jwiesmann @caebeman @SamoilenkoEvgeniy
in this step:

angular-cli.json
"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ], "scripts": [ "../node_modules/quill/dist/quill.js" ]

however,I use ng2 quickstart with system.js to start project, not angular-cli.
How to do?

ballontt picture ballontt on 23 Feb 2017

@mfalzetta I'm getting the same error. Any luck in solving it?

marinvirdol picture marinvirdol on 27 Feb 2017

How to import Quill with system.config.js and gulpfile.js? Can someone help :/

vas4oo picture vas4oo on 1 Mar 2017
👍2

I got same question with @ballontt and @vas4oo. Please help us.
Thank you.

manhcuong06 picture manhcuong06 on 12 Apr 2017

I had the same problem, following above answers fixed my issue, but in UI it's just showing one text field, it seems none the CSS got included, I am using webpack & I have added CSS in my vendor.ts like:

require('quill/dist/quill.core.css');
require('quill/dist/quill.snow.css');

require('primeng/resources/themes/omega/theme.css');
require('primeng/resources/primeng.min.css');
dheeraja00 picture dheeraja00 on 6 Jun 2017

I tried all suggestions apart from installing the plugin as I am using angular cli I don't think thats an option. What can I do when using angular cli?

Edit: check path to scripts.bundle.js. For some reason cli creates it with the wrong slashes on windows and i hadn't copied it to my view

GuerrillaCoder picture GuerrillaCoder on 13 Sep 2017

Tried all of the above but nothing worked for me, except adding this to my index.html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.5/quill.min.js" integrity="sha256-OEsiRE77EL46ZjgPqmsXfsNcOQPrMG/M6hHBF65jXP4=" crossorigin="anonymous"></script>

I got 'Quill is not defined' when building the app with -prod, but i dont get the same error on dev.

ekstremedia picture ekstremedia on 29 Jan 2018
👍2

initail by angular cli ?

tanxiaoning007 picture tanxiaoning007 on 29 Jan 2018

@livindg i have "scripts": [ "../node_modules/quill/dist/quill.js" ], in angular cli but it only loads quill in dev mode, not on build.

ekstremedia picture ekstremedia on 29 Jan 2018

I got this same issue while run the unit test. Any idea about it?

rameshrajendran214 picture rameshrajendran214 on 9 Feb 2018

I get a simular issue when building my application with Jenkins. Local dev & prod is working. But when I run my build on Jenkins I get following error. Anyone have an idea?

[INFO] ERROR in ./~/primeng/components/editor/editor.js [INFO] Module not found: Error: Can't resolve 'Quill' in '/var/lib/jenkins/workspace/projektdir/node_modules/primeng/components/editor'

renek95 picture renek95 on 17 Apr 2018

weird enough I have the same problem as @renek95 , prod works perfectly on localhost (osx), but fail when using jenkins on linux. any ideas? (@renek95 did you manage to solve it by any chance?)

yelhouti picture yelhouti on 3 Jul 2018

@renek95 and any body with same problem, the problem was that my server is using a case sensitive file system, so instead of:

        new webpack.ProvidePlugin({
            Quill: "Quill"
        }),

I shoudl have used:

Quill: "quill"

same goes for: import 'quill/dist/quill'; in vendor.ts

yelhouti picture yelhouti on 4 Jul 2018
👍1

Resources of quill needs to be added to your application. Example setup with CLI is as follows;

npm install quill --save

Add Quill to scripts in angular.json

"scripts": [... "node_modules/quill/dist/quill.js"],

Add Quill css to styles in angular.json

"styles": [ ... "node_modules/quill/dist/quill.core.css", "node_modules/quill/dist/quill.snow.css"],

I have checked this solution multiple times with new and existing projects, it works like charm :)

kamleshwebtech picture kamleshwebtech on 5 Jan 2019

Resources of quill needs to be added to your application. Example setup with CLI is as follows;

npm install quill --save

Add Quill to scripts in angular.json

"scripts": [... "node_modules/quill/dist/quill.js"],

Add Quill css to styles in angular.json

"styles": [ ... "node_modules/quill/dist/quill.core.css", "node_modules/quill/dist/quill.snow.css"],

I have checked this solution multiple times with new and existing projects, it works like charm :)

@kamleshwebtech I did exactly that and I'm not able to get it to work.

angular.json

           "styles": [
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeflex/primeflex.scss",
              "node_modules/quill/dist/quill.core.css",
              "node_modules/quill/dist/quill.snow.css",
            ],
            "scripts": ["./node_modules/quill/dist/quill.js"]

package.json

"quill": "^1.3.6",

Error:

ERROR ReferenceError: Quill is not defined
   at Editor.push../node_modules/primeng/components/editor/editor.js.Editor.ngAfterViewInit (editor.js:48)

It does work if I copy the cdn link on my index.html page. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.5/quill.min.js" integrity="sha256-OEsiRE77EL46ZjgPqmsXfsNcOQPrMG/M6hHBF65jXP4=" crossorigin="anonymous"></script>

Any ideas?

hidigitech picture hidigitech on 10 Apr 2019

I had the same problem, it only worked if I added the library through CND, something I couldn't do for my project.

After reading how angular cli works, probe and add the dependency as follows

"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/popper.min.js",
{
"input": "node_modules/quill/dist/quill.min.js",
"bundleName": "Quill"
}
]

this worked for me

Askeiter picture Askeiter on 1 Aug 2019

Tried all of the above but nothing worked for me, except adding this to my index.html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.5/quill.min.js" integrity="sha256-OEsiRE77EL46ZjgPqmsXfsNcOQPrMG/M6hHBF65jXP4=" crossorigin="anonymous"></script>

I got 'Quill is not defined' when building the app with -prod, but i dont get the same error on dev

Tried all of the above but nothing worked for me, except adding this to my index.html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.5/quill.min.js" integrity="sha256-OEsiRE77EL46ZjgPqmsXfsNcOQPrMG/M6hHBF65jXP4=" crossorigin="anonymous"></script>

I got 'Quill is not defined' when building the app with -prod, but i dont get the same error on dev.

it's worked for me!! on angular v 4.4

rohitgaidhane picture rohitgaidhane on 11 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

agusdutra picture agusdutra  路  52Comments
vadjs picture vadjs  路  39Comments
danny-swimmer picture danny-swimmer  路  39Comments
gatapia picture gatapia  路  42Comments
cagataycivici picture cagataycivici  路  31Comments