Ckeditor5-react: I want to integrate CKEditor5 in react app with comments feature ejecting the configuration is not an option tried using create-react-app@1 but it's showing the same error.

[varun-meka]

error:
Module not found: Can't resolve './@ckeditor/ckeditor5-collaboration-core/src/users/users.css' in '/Users/varun.meka/test/node_modules/@ckeditor/ckeditor5-comments/src/sidebar' and i have not ejected any configuration

[pomek]

Please, create a proper issue that describes what you want to achieve, what did you do in order to get it and what kind of errors are thrown. You can use the Issue template as a pattern if you don't have an idea of how to describe it.

A few days ago we resolved an issue related to Comments feature. You can read more about in #62.

PS: The title of the issue is not the best place for describing the entire problem.

[varun-meka]

Can you please the check the issue I have modified the description

[pomek]

It looks like Webpack cannot load CSS file. We are aware of this problem.

See this comment – https://github.com/ckeditor/ckeditor5-react/issues/62#issuecomment-463973705 – I described a solution that should help.

[varun-meka]

I tried it do I need to add any other variable styles because it throws

err: styles is not defined

[pomek]

Follow the instruction – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#changes-required-in-webpacks-production-configuration – step by step. After all, see this comment – https://github.com/ckeditor/ckeditor5-react/issues/62#issuecomment-463973705.

[varun-meka]

I did the same as mentioned I got this error

./node_modules/@ckeditor/ckeditor5-collaboration-core/src/users/usercolors.css (./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/@ckeditor/ckeditor5-collaboration-core/src/users/usercolors.css)
Error: No PostCSS Config found in: /Users/varun.meka/test/node_modules/@ckeditor/ckeditor5-collaboration-core/src/users

[pomek]

Could you share the configuration that produces the error?

[varun-meka]

{
          oneOf: [

            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              loader: require.resolve('url-loader'),
              options: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
        { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            {
  test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
  use: [ 'raw-loader' ]
},
{
  test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
  use: [
    {
      loader: 'style-loader',
      options: {
        singleton: true
      }
    },
    {
      loader: 'postcss-loader',
      options: styles.getPostCssConfig( {
        themeImporter: {
          themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
        },
        minify: true
      } )
    }
  ]
},
{
  test: /\.css$/,
  exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
  // (...)
},
            {
              test: [
                  /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
                  /ckeditor5-[^/\\]+[/\\]src[/\\].+\.css/ // 
              ],
              use: [
                {
                  loader: 'style-loader',
                  options: {
                    singleton: true
                  }
                },
                {
                  loader: 'postcss-loader',
                  options: styles.getPostCssConfig({
                    themeImporter: {
                      themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                    },
                    minify: true
                  })
                }
              ]
            },
            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                // @remove-on-eject-begin
                babelrc: false,
                configFile: false,
                presets: [require.resolve('babel-preset-react-app')],
                cacheIdentifier: getCacheIdentifier(
                  isEnvProduction
                    ? 'production'
                    : isEnvDevelopment && 'development',
                  [
                    'babel-plugin-named-asset-import',
                    'babel-preset-react-app',
                    'react-dev-utils',
                    'react-scripts',
                  ]
                ),
                // @remove-on-eject-end
                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo![path]',
                        },
                      },
                    },
                  ],
                ],

                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },
            // Process any JS outside of the app with Babel
            {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
                  [
                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true },
                  ],
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                // @remove-on-eject-begin
                cacheIdentifier: getCacheIdentifier(
                  isEnvProduction
                    ? 'production'
                    : isEnvDevelopment && 'development',
                  [
                    'babel-plugin-named-asset-import',
                    'babel-preset-react-app',
                    'react-dev-utils',
                    'react-scripts',
                  ]
                ),
                // being evaluated would be much more helpful.
                sourceMaps: false,
              },
            },
            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              }),
              sideEffects: true,
            },
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
            {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            },
            {
              loader: require.resolve('file-loader'),

              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/,/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,/ckeditor5-[^/\\]+[/\\]src[/\\].+\.css/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },

          ],
        },

[pomek]

AFAICS:

{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },

catches our styles, so you need to disable it for CKEditor 5 assets:

{ 
    test: /(\.css$)/, 
    exclude: [
        /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
        /ckeditor5-[^/\\]+[/\\]src[/\\].+\.css/
    ],
    loaders: ['style-loader', 'css-loader', 'postcss-loader'] 
},

Next:

{
  test: /\.css$/,
  exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
  // (...)
}

It does nothing. You must remove it.

Next:

// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
  test: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: true,
    getLocalIdent: getCSSModuleLocalIdent,
  }),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'sass-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'sass-loader'
  ),
},

Are you sure that you need three another CSS loaders? If so, you must disable CKEditor 5 assets as we did at the beginning of this comment.

If it still does not work, I can't help you because I don't know what to do more. We checked our documentation a few times and it worked for us perfectly. Be sure that you follow the documentation step by step.

[varun-meka]

Thanks, @pomek It worked

[varun-meka]

HI @pomek I was going through your custom build documentation and I can't add extra plugins.
Is It possible to add extra plugins/custom build without npm run eject

[pomek]

If you want to use CKEditor 5 Framework inside the react application, you can't avoid ejecting.

But you can create a custom build in a separate repository and add it as a dependency to the react app. This way you can skip ejecting because the build will be ready-to-use.

[varun-meka]

So you mean creating a custom build by ejecting the configuration and add it as dependency to the parent react app

[pomek]

I meant creating a custom build – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html. You can fork a current build, modify to match your requirements, rebuild the package and publish (on GH or even npm).

Then, inside your react app you can add the build as a dependency. In your component, you can just import it and you don't have to think about ejecting the webpack configurations.