Error "Cannot find module '0'" upon including '@ckeditor/ckeditor5-theme-lark' in nuxt.config.js

[Sensey19]

I get an error when I add this code in nuxt.config.js:

   postcss: CKEditorStyles.getPostCssConfig({
      themeImporter: {
        themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
      },
      minify: true
    }),

The error message: Cannot find module '0'
Require stack:

• node_modules/@nuxt/core/dist/core.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.resolve (internal/modules/cjs/helpers.js:107:19) at _resolve (node_modules/jiti/dist/jiti.js:1:108226) at Resolver.jiti [as _require] (node_modules/jiti/dist/jiti.js:1:110413) at Resolver.requireModule (node_modules/@nuxt/core/dist/core.js:381:29) at node_modules/@nuxt/webpack/dist/webpack.js:792:58 at Array.map () at PostcssConfig.loadPlugins (node_modules/@nuxt/webpack/dist/webpack.js:791:10) at PostcssConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:830:14) at StyleLoader.postcss (node_modules/@nuxt/webpack/dist/webpack.js:909:39) at StyleLoader.apply (node_modules/@nuxt/webpack/dist/webpack.js:969:12) at WebpackClientConfig.rules (node_modules/@nuxt/webpack/dist/webpack.js:1357:28) at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1537:21) at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1708:26) at WebpackBundler.getWebpackConfig (node_modules/@nuxt/webpack/dist/webpack.js:2016:19) at WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2023:12)

It's my package.json: "dependencies": { "@blowstack/ckeditor-nuxt": "^0.6.0", "@ckeditor/ckeditor5-basic-styles": "^29.2.0", "@ckeditor/ckeditor5-dev-utils": "^29.0.2", "@ckeditor/ckeditor5-dev-webpack-plugin": "^29.0.2", "@ckeditor/ckeditor5-editor-classic": "^29.2.0", "@ckeditor/ckeditor5-essentials": "^29.2.0", "@ckeditor/ckeditor5-heading": "^29.2.0", "@ckeditor/ckeditor5-image": "^29.2.0", "@ckeditor/ckeditor5-link": "^29.2.0", "@ckeditor/ckeditor5-paragraph": "^29.2.0", "@ckeditor/ckeditor5-theme-lark": "^29.2.0", "@ckeditor/ckeditor5-vue2": "^3.0.1", "@nuxt/typescript-runtime": "^2.1.0", "@nuxtjs/axios": "^5.12.5", "@nuxtjs/composition-api": "^0.31.0", "@nuxtjs/pwa": "^3.3.5", "@nuxtjs/svg-sprite": "^0.5.2", "@soerenmartius/vue3-clipboard": "^0.1.2", "cookie-universal-nuxt": "^2.2.1", "core-js": "^3.8.3", "date-fns": "^2.28.0", "moment": "^2.29.4", "nuxt": "^2.15.3", "nuxt-dropzone": "^1.0.4", "nuxt-typed-vuex": "^0.2.0", "path": "^0.12.7", "simplebar-vue": "^1.6.9", "v-click-outside": "^3.1.2", "vue": "2.6.14", "vue-audio-recorder": "^3.0.1", "vue-js-toggle-button": "^1.3.3", "vue-loader": "15.9.8", "vue-select": "^3.18.3", "vue-server-renderer": "2.6.14", "vue-template-compiler": "2.6.14", "vue-tippy": "^4.14.0", "vue2-circle-progress": "^1.2.3", "vue2-google-maps": "^0.10.7" }, "devDependencies": { "@nuxt/types": "^2.15.8", "@nuxt/typescript-build": "^2.1.0", "@nuxtjs/eslint-config-typescript": "^6.0.1", "@nuxtjs/style-resources": "^1.2.1", "@nuxtjs/tailwindcss": "^4.0.2", "@tailwindcss/forms": "^0.5.0", "@tailwindcss/postcss7-compat": "^2.1.0", "@typescript-eslint/parser": "^4.31.1", "@vue/cli-service": "4.5.11", "@vue/eslint-config-airbnb": "5.3.0", "autoprefixer": "^9.8.6", "babel-eslint": "10.1.0", "eslint": "^7.32.0", "eslint-import-resolver-alias": "1.1.2", "eslint-plugin-vue": "7.5.0", "node-sass": "5.0.0", "postcss": "^7.0.35", "sass-loader": "10.1.1", "postcss-loader": "^3.0.0", "raw-loader": "^0.5.1", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0", "tailwindcss-font-inter": "^3.0.1" },

[changemyminds]

Could you reproduce your project or code ?

I have some time unused Ckeditor5. In my memory, I finally choose not directly use Ckeditor5 in nuxt. Because it's have a lot of bugs. I use Ckeditor5 in my local module and include local module to nuxt. It work fine and easy to use.

[bluegmlduf2]

I had the same problem. I solved it by modifying the build of nuxt.config.js as below. And I used the version "4.3.0" in postcss-loader "postcss-loader": "4.3.0",

// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/],

    plugins: [
      // If you set ssr: true that will cause the following error. This error does not affect the operation.
      // ERROR  [CKEditorWebpackPlugin] Error: No translation has been found for the zh language.
      new CKEditorWebpackPlugin({
        // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
        language: 'ja',
        additionalLanguages: 'all',
        addMainLanguageTranslationsToAllAssets: true
      })
    ],

    // // If you don't add postcss, the CKEditor css will not work.
    // postcss: CKEditorStyles.getPostCssConfig({
    //   themeImporter: {
    //     themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
    //   },
    //   minify: true
    // }),

    extend (config, { isDev, isClient }) {
      // If you do not exclude and use raw-loader to load svg, the following errors will be caused.
      // Cannot read property 'getAttribute' of null
      const svgRule = config.module.rules.find((item) => {
        return /svg/.test(item.test)
      })
      svgRule.exclude = [path.join(__dirname, 'node_modules', '@ckeditor')]

      // add svg to load raw-loader
      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ['raw-loader']
      })

      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\].+\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: CKEditorStyles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: true
              })
            }
          }
        ]
      })
    }