PostCSS dependency conflict in fresh CRA v5 + Storybook project following node_modules and package-lock.json removal #19218
Comments
|
I've managed to workaround this issue (so far) by overriding a Sass-related Webpack plugin that react-scripts/CRA require, called resolve-url-loader. The version required depends on PostCSS v7 but the latest major version upgrades to PostCSS v8. The override creates a separate issue where PostCSS is not found and builds fail with this error: Simply installing the same version of PostCSS as react-scripts directly in the project addresses this however. So given the solution this isn't necessarily a Storybook-related issue. I'll open a CRA PR to bump resolve-url-loader. In my testing I have seen some non-deterministic install behavior post-override however where I still got a PostCSS conflict when installing fresh without an existing node_modules and package-lock.json file. I'm currently not able to reproduce that but I was able to workaround that as well by installing all Storybook-related packages as optional dependencies. This removed manager-webpack4 from the tree and it's potential for conflict. The full workaround can be seen here: https://github.com/pushred/storybook-init-npm-v8-lockfile-issue-repro/tree/workaround |
|
Actually optional dependencies are not a possible solution for this. Builds fail when Storybook is missing due to a separate CRA issue where it attempts to bundle story modules: |
|
Facing the same issue. |
|
had the same issue and fixed with override in package.json |
Describe the bug
As the repro demonstrates I have created a project using Create React App and Storybook init scripts, like so:
npx create-react-app <name> --template typescriptnpx storybook initThe result works, until I reach a point in the project where I need to remove
package-lock.jsonandnode_modulesin order to address some unrelated dependency issue. If I install dependencies from this point using the latest npm version v8.19.1 I am from thereon unable to build CRA production bundles due to this error:Running
npm ls postcssI see that the dependency graph is in a terrible state:Tons of dependency errors
To Reproduce
As with #18298 this cannot use
npx sb@next reprobecause it is only reproducible when using npm v8. Here is a repository that contains three commits demonstrating the issue:https://github.com/pushred/storybook-init-npm-v8-lockfile-issue-repro/commits/main
To return to a working state reset HEAD to pushred/storybook-init-npm-v8-lockfile-issue-repro@410cb43
To break it again: run
rm package-lock.json && node_modules && npm inpm i --legacy-peer-depsbut the effect is the samenpm ls postcssto observe broken dependency graph andnpm run buildto observe failing CRA production buildSystem
Additional context
This uses the legacy peer dependency flag workaround previously discussed in #18298
We cannot use Yarn unfortunately. Storybook will be removed from the project if it is not compatible with the latest patch version of npm shipping with the active LTS version of Node. I am going to attempt making Storybook an optional dependency to avoid this from affecting our prod builds but I'm not optimistic this will work without breaking Storybook and/or Chromatic.
The text was updated successfully, but these errors were encountered: