Quill delta / Angular 13 / Webpack error

[medi6]

Hi,

I was using Quill 2.0.0 pre 4 in Angular 12, very well, but now after Angular update to 13, I've got a Webpack error : ncaught SyntaxError: Unexpected token ':' at Object../node_modules/quill-delta/dist/Op.js (quill.js:1861) at nested_webpack_require_732 (quill.js:36) at eval (Delta.js:9) at Object../node_modules/quill-delta/dist/Delta.js (quill.js:1837) at nested_webpack_require_732 (quill.js:36) at eval (quill.js:6) at Module../core/quill.js (quill.js:611) at nested_webpack_require_732 (quill.js:36) at eval (core.js:2) at Module../core.js (quill.js:539)

I'm testing with older versions : it's ok with quill 1.3.7... I don't know what has changed between the two Angular versions that causes this problem...

Thanks,

[mohammadsafia]

I faced the same issue when updating my angular app to the latest version (13)

[medi6]

I faced the same issue when updating my angular app to the latest version (13)

\nsourceURL=webpack://Quill/./node_modules/quill-delta/dist/Op.js?"

I don't know why, but the line must be, as others :

\n//# sourceURL=webpack://Quill/./node_modules/quill-delta/dist/Op.js?"

If you know how to fix this....

Thanks,

[medi6]

It's also ok with 2.0.0.prev1

[mohammadsafia]

It's also ok with 2.0.0.prev1

also, it's not working with this version, it works just with this 1.3.7 but all custom blot not working.

[jodinathan]

It's also ok with 2.0.0.prev1

@medi6 is there any info regarding this new version?

[mwijnands]

It works in angular 12.2.0 and breaks in 12.2.1. I think it has something to do with webpack being updated in that version of angular-builder.

[ErikYu]

One way to solve this issue is to make sourceMap=false. But this should only be a workaround. So will this issue be solved in the future?

[ErikYu]

Another way is stop using import. Instead we can include quilljs in angular.json. "scripts": [ "node_modules/quill/dist/quill.js" ] Then use declare const Quill: any; in component file.

[JLudwig2552]

Looks like it's related to this: https://github.com/parcel-bundler/parcel/issues/3543

[qlombat]

Is there any solution, I still have the issue and the sourceMap set to false is not a convenient fix.

[Un1xMida]

guys the sorucemap false is not a valid solution because u will not be able to track errors or debug ur code , however i have tried the solution given by @ErikYu but it didnt work,

[Un1xMida]

so no answer huh ?

[KillerCodeMonkey]

same thing with v2.0.0-beta.0

[benbro]

Make sure you have the specific beta version in your package.json: "quill": "2.0.0-beta.0"

[KillerCodeMonkey]

As i said. I got the error with angular 17 and the 2.0.0 beta.0 and yes I installed the latest typings As well.

As the creator and maintainer i would like to create a beta Version of my package as well.

Ng-packagr and Karma test bundler are thowing this error. And the workaround to use quilljs as external Script is no Option for me as package maintainer.

[luin]

@KillerCodeMonkey Is there a repo for reproduction so I can test?

[KillerCodeMonkey]

sure: i created a draft pr for my ngx-quill package. there you see my changes and even the failing ci with default angular test runner and builder.

https://github.com/KillerCodeMonkey/ngx-quill/pull/1778

It throws the same error.

https://github.com/KillerCodeMonkey/ngx-quill/actions/runs/7149782730/job/19472368497?pr=1778

Keep in mind this is PR is not final. i just started the transition and fixed the Delta typing and tried to run the test cases to see what fails or changed.

[benbro]

Run npm ls inside your project and check the installed Quill version. If it's not the correct version replace "quill": "^2.0.0-beta.0", with "quill": "2.0.0-beta.0", without the caret (^) in package.json. Quill 2.0 is a typescript project. You probably don't need @types/quill.

[KillerCodeMonkey]

@benbro you are right. it was late and i missed the caret thing. but strange the dev.4 is marked as "latest" release instead of the "beta.0"

i made some changes like adding custom webpack loader for karma tests to handle inline svgs and changed insertContent calls with html. my tests are running without quite heavy adoptions.

If someone is interested -> checkout the linked pr above

[KillerCodeMonkey]

anyone has an idea how to get the inlined svg icons working with angular 17? vite just puts the paths to the images into the dom instead the svgs.

https://github.com/KillerCodeMonkey/ngx-quill-example/pull/1632

[pablopla]

The svg files are inline in the compiled node_modules/quill/dist/quill.js so we shouldn't get an error. import Quill from 'quill'; imports the raw files instead of the compiled file from dist/quill.js

This should be "main": "dist/quill.js", instead of "main": "quill.js", https://github.com/quilljs/quill/blob/develop/packages/quill/package.json#L7

Reported here: https://github.com/quilljs/quill/issues/3928

[KillerCodeMonkey]

strange because in general it should check the package.json of the node_module and grad the correct path from there.

[EdManukyan]

@KillerCodeMonkey any updates when the ngx quill have quill 2.0 support? Are you planing to upgrade after the stable quill 2.0 is released ?

[KillerCodeMonkey]

There is a pr with quill rc0 Support and I already Released a beta Version.

But there are some Things to know:

• I Import quill from the cjs, because the in the other modules/bundles svg files are inlined and angulars esbuild is not working with That
• In General most no third Party modules/Blots are not working

Feel free to try

[pablopla]

@KillerCodeMonkey How do you import quill from cjs?

There is support for custom esbuild loaders in Angular 17.1.0-rc.0. I've tried adding SVG loader to angular.json:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "loader": {
              ".svg": "text"
            },

But I only get the SVG path instead of its content:

<button type="button" class="ql-bold" aria-pressed="false" aria-label="bold">/@fs/home/u/project/node_modules/quill/assets/icons/bold.svg</button>

Do you know if the issue is on Quill side or Angular side?

[KillerCodeMonkey]

I import it in my Service from 'quill/dist/quill.js'

[KillerCodeMonkey]

it is working with the latest experimental build of quilljs. i released a new beta version of ngx-quill and updated my quill 2 beta branch of the example repository, if someone is interested.

[benbro]

Closing based on @KillerCodeMonkey comment.