[Docs] Missing dependency in snippet in Vue integration

[de1ck]

ckeditor5 use advanced-setup
install
Run error :
This dependency was not found:

• -!../../../css-loader/index.js??ref--6-oneOf-3-1!../../../postcss-loader/src/index.js??ref--6-oneOf-3-2!./@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css in
  ./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/@ckeditor/ckeditor5-image/theme/textalternativeform.css, ./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css and 1 other

To install it, you can run: npm install --save -!../../../css-loader/index.js??ref--6-oneOf-3-1!../../../postcss-loader/src/index.js??ref--6-oneOf-3-2!./@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css

[oleq]

Can you provide your full webpack config?

[nkamuo]

I'm getting the same issue on Quasar framework.
Need help please.

[ManishBobde]

Failed to compile.

./node_modules/@ckeditor/ckeditor5-real-time-collaboration/theme/usermarkers.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/postcss-loader/src??ref--6-oneOf-3-3!./node_modules/@ckeditor/ckeditor5-real-time-collaboration/theme/usermarkers.css)
ParserError: Syntax Error at line: 1, column 32

Hi Oleq ,

I am also getting above issue when integrating and building editor from source

[Reinmar]

Can you provide your full webpack config?

Also, are you aware that in order to use https://www.npmjs.com/package/@ckeditor/ckeditor5-real-time-collaboration you need a license key?

[de1ck]

@Reinmar sry, I'm not using ckeditor5 right now，Some configurations are no longer available

[Reinmar]

The same issue was reported on https://stackoverflow.com/questions/55569896/this-dependancy-was-not-found-when-i-try-to-import-from-ckeditor, but again, without any details.

[jcroucher]

I had the same error. The error specifically occurs in
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
The key thing is I was missing the vue.config.js config and @ckeditor/ckeditor5-theme-lark
The docs on https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html don't mention installing the theme if people are to copy/paste the conf
It seems to be more a case of missing steps than an error.

[Reinmar]

cc @oleq

There's indeed a bug. Theme lark is used but it's never installed in this guide:

The React guide, for instance, mention that you need to install it: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#installing-missing-dependencies

[pounard]

I have the same issue, not exactly the same but messages are similar. It seems that using @import "@ckeditor5/..." in a CSS file does not trigger node_modules resolution when compiling, it should be prefixed using ~ (i.e. @import "~@ckeditor5/..."). It's even documented as such in https://github.com/webpack-contrib/css-loader#import

To import styles from a node_modules path (include resolve.modules) and for alias, prefix it with a ~:

I didn't find a workaround yet, I'm trying hard to find a place where I could hook on the @import directive, but I'm not a JS/webpack expert enough to do be able to succeed I guess.

[pounard]

OK, I guess I'm missing the themePath or some other in config, I'll try with that.

It happens that I'm using @symfony/encore to configure webpack (this is a Symfony project) − my configuration is generated using the Encore tool, and I don't have much power over the generated webpack configuration. Configuring CKEditor5's own CSS include is rather complex, and it doesn't fit at all with Symfony's Encore conf builder.

Solution for my use case would be to generate the ckeditor dist on its own with a custom webpack configuration then include the aforementioned dist in my main.js using an import. I'm going to do that.

[pounard]

After I struggled a lot with regeneratorRuntime, I finally got this. But now, error is:

 CKEditorError: "model-createPositionAt-offset-required: Model#createPositionAt() requires the offset when the first parameter is a model item. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-model-createPositionAt-offset-required
"
    _construct app.gestion.js:21
    Wrapper app.gestion.js:21
    o ckeditor.js:6
    _createAt ckeditor.js:307
    Ws ckeditor.js:311
    e ckeditor.js:389
    fire emittermixin.js:196
    _convertItem upcastdispatcher.js:218
    _convertChildren upcastdispatcher.js:249
    e upcast-converters.js:360
    fire emittermixin.js:196
    _convertItem upcastdispatcher.js:218
    _convertChildren upcastdispatcher.js:249
    za upcast-converters.js:583
    fire emittermixin.js:196
    _convertItem upcastdispatcher.js:222
    convert upcastdispatcher.js:177
    toModel datacontroller.js:269
    change model.js:159
    toModel datacontroller.js:268
    parse datacontroller.js:250
    init datacontroller.js:204
    _runPendingChanges model.js:705
    enqueueChange model.js:207
    init datacontroller.js:203
    decorate observablemixin.js:254
    fire emittermixin.js:196
    t observablemixin.js:258
    create classiceditor.js:206
ckeditor.js:15:36

I started off from a stable release of https://github.com/ckeditor/ckeditor5-build-classic for which I added "@ckeditor/ckeditor5-alignment": "^10.0.4", I think that there is an update somewhere in the dependencies breaking it.

[ma2ciek]

"@ckeditor/ckeditor5-alignment": "^10.0.4"

If you start from the stable branch, then all latest releases will be compatible, i.e. "@ckeditor/ckeditor5-alignment" will be compatible at v.11.1.0.

After I struggled a lot with regeneratorRuntime, I finally got this.

We use ES6, so transpiling code with Babel isn't necessary for modern browsers. On the other hand, note that CKEditor 5 doesn't officially work yet on IE11, although there's recent work on this field.

[pounard]

We use ES6, so transpiling code with Babel isn't necessary for modern browsers.

I had the error without using babel, actually. But it might be the fact that I then included in the dist within another project using its own webpack configuration that might have caused the problem. I did succeed it working around this problem though, so that's fine.

Now, I have an error raised about Model.createPositionAt() that needs a value for its second argument. I did try compiling from the official classic build repository, using a stable tag, but I always endup having this error. I think this could be due to a specific bug in a specific package version (I did try to find it using a dichotomy search, forcing each dependency version one by one but I could not find it). Sad but it seems that the https://github.com/ckeditor/ckeditor5-build-classic package does not provide a lock file for dependencies versions.

No matter how hard I tried, even using the unmodified classic source, I always end up having this error, I don't have it when I use a pre-built official dist.

[ma2ciek]

Now, I have an error raised about Model.createPositionAt() that needs a value for its second argument. I did try compiling from the official classic build repository, using a stable tag, but I always endup having this error. I think this could be due to a specific bug in a specific package version (I did try to find it using a dichotomy search, forcing each dependency version one by one but I could not find it). Sad but it seems that the ckeditor/ckeditor5-build-classic package does not provide a lock file for dependencies versions.

I've just followed these steps:

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
npm install -D @ckeditor/ckeditor5-alignment
npm install
npm run build
open samples/index.html

And everything works fine. You can give it a try.

[ma2ciek]

And hopefully, in this iteration, we'll make a tool that will give you a compilation-time warning when the package versions mismatch (some core packages are duplicated when packages mismatch, so it should be easy to find out).

[mlewand]

Closed by #1775.

[gopala000]

I followed the steps in https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-the-editor-from-source and https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#building

to create the attached webpack config. Since I don't use vue CLI, I had to do this way. I encounter the same error reported in this issue. I see all dependencies are there in node_modules folder. What am I missing in webpack config?

webpack.config.txt
builderror.txt

[gopala000]

I fixed an issue with exclude in the config and I'm getting a different error now. Appreciate if you can tell if something is incorrect in config.

error.txt
webpack.config.txt

[gopala000]

Finally got it working with attached config:
webpack.config.txt
.