I receive an error after I run my angular 10 project and browse to the <quill-editor></quill-editor>. The Quill text editor works great on debug mode, but on production mode it fails.
Here is the error:
ERROR Error: Uncaught (in promise): TypeError: n.e is not a function
TypeError: n.e is not a function
at h.<anonymous> (ngx-quill.js:54)
at Generator.next (<anonymous>)
at tslib.es6.js:74
at new e (zone.js:913)
at o (tslib.es6.js:70)
at ngx-quill.js:52
at new e (zone.js:913)
at h.getQuill (ngx-quill.js:52)
at p.<anonymous> (ngx-quill.js:269)
at Generator.next (<anonymous>)
at w (zone.js:832)
at new e (zone.js:916)
at o (tslib.es6.js:70)
at ngx-quill.js:52
at new e (zone.js:913)
at h.getQuill (ngx-quill.js:52)
at p.<anonymous> (ngx-quill.js:269)
at Generator.next (<anonymous>)
at tslib.es6.js:74
at new e (zone.js:913)
My package.json:
{
"name": "pmb",
"version": "0.0.1",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js",
"start": "webpack-dev-server --inline --progress --port 54535",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"postinstall": "ngcc",
"create-stats": "webpack --profile --json | Out-file 'dist/stats.json' -Encoding OEM",
"stats": "webpack-bundle-analyzer stats.json"
},
"dependencies": {
"@angular/animations": "^10.1.2",
"@angular/cdk": "10.2.1",
"@angular/cli": "^10.1.2",
"@angular/common": "^10.1.2",
"@angular/compiler": "^10.1.2",
"@angular/compiler-cli": "^10.1.2",
"@angular/core": "^10.1.2",
"@angular/flex-layout": "10.0.0-beta.32",
"@angular/forms": "^10.1.2",
"@angular/material": "^10.2.1",
"@angular/platform-browser": "^10.1.2",
"@angular/platform-browser-dynamic": "^10.1.2",
"@angular/platform-server": "^10.1.2",
"@angular/router": "^10.1.2",
"@types/chart.js": "2.9.3",
"@types/datatables.net": "1.10.13",
"@types/jquery": "^3.3.5",
"@types/node": "^10.12.10",
"angular7-csv": "^0.2.12",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^3.0.0",
"bootstrap": "^3.4.1",
"chart.js": "2.9.3",
"core-js": "2.5.7",
"css": "^2.2.4",
"d3": "^4.7.3",
"es6-shim": "^0.35.1",
"event-source-polyfill": "1.0.4",
"expose-loader": "^0.7.5",
"hammerjs": "2.0.8",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.5.1",
"json-loader": "^0.5.7",
"ng2-handsontable": "2.1.0-rc.3",
"ngx-quill": "^13.0.1",
"popper.js": "^1.14.6",
"preboot": "^7.0.0",
"qrcode": "^1.4.4",
"quill": "1.3.7",
"reflect-metadata": "0.1.10",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.5.3",
"shepherd.js": "2.0.0-beta.35",
"to-string-loader": "^1.1.5",
"tslib": "2.0.1",
"typescript-watcher": "0.0.4",
"url-loader": "1.1.2",
"webpack-hot-middleware": "^2.24.3",
"xlsx": "^0.15.3",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@types/jasmine": "3.3.0",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^5.2.1",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.0.0-beta.4",
"jasmine-core": "^3.3.0",
"karma": "^4.3.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^2.0.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^4.0.0-rc.4",
"null-loader": "^0.1.1",
"raw-loader": "0.5.1",
"rimraf": "2.6.2",
"style-loader": "0.20.3",
"typescript": "3.9.7",
"webpack": "^4.27.1",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.1.4"
}
}
As you can see I use "quill": "1.3.7" and "ngx-quill": "^13.0.1". I tried it with ngx-quill 12.0.1, but i get the same error on production mode.
Debugging works with "webpack-dev-server --inline --progress --port 54535"
And production mode: "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
If i look into ngx-quill.js it seems the error resides in getQuill():
getQuill() {
this.count++;
if (!this.Quill && this.count === 1) {
this.$importPromise = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
var _a, _b;
const quillImport = yield import('quill'); // Error here
this.Quill = (quillImport.default ? quillImport.default : quillImport);
// Only register custom options and modules once
(_a = this.config.customOptions) === null || _a === void 0 ? void 0 : _a.forEach((customOption) => {
const newCustomOption = this.Quill.import(customOption.import);
newCustomOption.whitelist = customOption.whitelist;
this.Quill.register(newCustomOption, true, this.config.suppressGlobalRegisterWarning);
});
(_b = this.config.customModules) === null || _b === void 0 ? void 0 : _b.forEach(({ implementation, path }) => {
this.Quill.register(path, implementation, this.config.suppressGlobalRegisterWarning);
});
resolve(this.Quill);
}));
}
return this.$importPromise;
}
Can anyone help me out? Thanks.
I found the solution. Seems like I made an obvious rookie-mistake, but i had to import quill in my component.
import "quill";
// Your Component
Confusing, because it works without the import statement in development mode, yet not in production mode.
Neither is it stated in the documentation, or is this present in the ngx-quill example projects i found online. Which leads me to believe that i still haven't truly found the "correct" answer. Maybe my custom webpack configuration is screwing up the compilation?