Does it work with ejected CRA?

[hdsand]

I've just added the addon and couldn't start the project after that.

I have an ejected create-react-app with Storybook. In order to use some additional PostCSS plugins, I've added postcss-nested and everything works fine when I start/build the cra project but it doesn't work with Storybook.

I'll be grateful if you help me.

`ERROR in ./src/components/Button/Button.module.css (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader/dist/cjs .js!./node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--10-2!./src/components /Button/Button.module.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): SyntaxError

(1:1) Unknown word

1 | var api = require("!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js!../../../node_modules/@storybook/addon-postcss/node_modules/p ostcss-loader/dist/cjs.js??ref--10-2!./Button.module.css"); 3 |

@ ./src/components/Button/Button.module.css 2:26-408 53:4-74:5 56:18-400 @ ./src/components/Button/Button.tsx @ ./src/stories/Button/Button.stories.tsx @ ./src sync ^.(?:(?:^|[\/]|(?:(?:(?!(?:^|[\/]).).)?)[\/])(?!.)(?=.)[^\/]?.stories.(js|jsx|ts|tsx))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@storybook/core/dist/server/c ommon/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common /config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDeco rator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs. js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addPar ameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noI nfo=undefined `

main.js module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app', '@storybook/addon-postcss' ], };

postcss.config.js

module.exports = { plugins: [ require('postcss-nested'), ] };

[phated]

This plugin doesn't work with any system that already registers the style-loader and css-loader on the .css file extension. Namely, CRA.

How have you gotten the postcss-loader to include your config? Did you upgrade it once you ejected? If you already have >=4.0.0 of postcss-loader in your project, you don't need to use this addon at all.

I just tried adding Storybook to an ejected CRA and it doesn't add @storybook/preset-create-react-app. Using that preset causes all of CRA's webpack config to be loaded into Storybook, which would cause a conflict with this addon.

[phated]

I opened https://github.com/facebook/create-react-app/pull/10441 in an attempt to make ejecting for this postcss stuff unnecessary (and to not need this addon).

[hdsand]

@phated Thanks for the answer!

I have "postcss-loader": "3.0.0". I've just ejected CRA and it's included.

That's how I solved it

`module.exports = { stories: ['../src/*/.stories.mdx', '../src/*/.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app', ], webpackFinal: async config => { config.module.rules.push({ test: /.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: [require('postcss-nested')], }, }, ], include: __dirname, }); config.resolve.modules.push(process.cwd() + '/node_modules'); config.resolve.modules.push(process.cwd() + '/src'); config.resolve.symlinks = false;

return config;

}, };`

But! As for '@storybook/preset-create-react-app', when I run 'yarn storybook', it works fine. Everything works! Unfortunately, when I run 'yarn build-storybook', I get build without my nested css classes. I don't get it why webpackFinal doesn't work. It's a mystery :) Do you have any ideas?

Without '@storybook/preset-create-react-app' I get the build without my styles at all.

main.js is ignored when I'm trying to build Storybook for prod.

[phated]

I believe there will be troubles with you pushing those loaders into the config because CRA already adds them. You would need to remove the loaders added by CRA and then push in your new ones.

I have "postcss-loader": "3.0.0". I've just ejected CRA and it's included. That's how I solved it

Can you explain this more? Where did you add your postcss-nested plugin in your ejected CRA?

[phated]

@hdsand I'm reading the @storybook/preset-create-react-app code and it looks like it doesn't support an ejected CRA. Have you had it working at all with the ejected version (ignoring the postcss stuff)?

[hdsand]

@phated ,

Thanks, I'm trying different approaches to solve the problem. Storybook is using its own webpack so there isn't any conflicts.

As for postcss nested, I simply added it to my project.

Could you please check the repo https://github.com/hdsand/cra_storybook_postcss

Everything works fine with yarn storybook, but it ignores webpackFinal when yarn build-storybook