doczjs/docz-plugin-css

Create-React-App v2 and this package are conflicting due to Webpack version

kunokdev opened this issue · 4 comments

kunokdev commented

After installing this package and running dev server, I get this screen:
What is the most convenient way to go around this?

The react-scripts package provided by Create React App requires a dependency:

"webpack": "4.19.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

~node_modules/webpack (version: 4.29.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.
swapnildubal commented

Even I am facing the same issue. Removing 'docz-plugin-css' :

  1. able to compile the create react app code
  2. throws parsing error when I try to load external .css file in component and run yarn docz:dev
kunokdev commented

@swapnildubal In your case it might help you to add post-css loader as well. In your doczrc.js make sure you applied these:

 plugins: [
    css({
      preprocessor: "sass",
      cssmodules: true,
    }),
    css({
      preprocessor: "postcss",
    }),
  ],
swapnildubal commented

I resolved the issue by removing docz-plugin-css and making below update in the doczrc.js:

modifyBundlerConfig: (bundlerConfig) => {
const rules = [
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
];
bundlerConfig.module.rules.push(...rules);
return bundlerConfig;
},

hubgit commented

It would be useful to note somewhere that this plugin can be replaced (for the common use case of just needing to be able to import CSS files) by simply adding style-loader and css-loader to the webpack config, as @swapnildubal mentions above.

modifyBundlerConfig: bundlerConfig => {
  bundlerConfig.module.rules.push({
    test: /.css$/,
    use: ['style-loader', 'css-loader'],
  })
  return bundlerConfig
},
  • 👍3