Open kumikumi opened 2 years ago
Got the same issue here, i also tried to add :
addons: [
{
name: 'storybook-preset-craco',
options: {
cracoConfigFile: '../craco.config.js'
}
}
],
The craco.config.file
is at the root of my project. And i got this error :
info => Serving static files from ./public at /
ERR! Error: Cannot find module '../craco.config'
In addition, craco
will move to CRA5 soon :
https://github.com/gsoft-inc/craco/releases/tag/v7.0.0-alpha.0
My guess is that the root cause is that this package relies on directly requiring helpers from the dist folder of @storybook/preset-create-react-app
though I haven't confirmed. Seems like one option is a PR to get those helpers exported though I can understand storybook not wanting to create / support that API.
A quick and dirty workaround that I implemented was to create a specific storybook craco config and just live without the ModuleScopePlugin
for storybook because it's not important to me in that context though a more elegant solution might be to not remove entirely and directly include the desired paths like: https://github.com/dvhb/craco-extend-scope/blob/master/index.js
.storybook/main.js
Set path to storybook config
{
name: 'storybook-preset-craco',
options: {
cracoConfigFile: path.join(__dirname, 'craco.storybook.config.js'),
},
},
.storybook/craco.storybook.config.js
Add craco plugin to remove ModuleScopePlugin
const cracoConfig = require('../craco.config');
/**
* Add a plugin to remove ModuleScopePlugin from webpack when running storybook because it messes
* with storybook-preset-craco.
*/
cracoConfig.plugins.push({
plugin: {
overrideWebpackConfig: ({ webpackConfig }) => {
webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
(plugin) => plugin.constructor.name !== 'ModuleScopePlugin'
);
return webpackConfig;
},
},
});
module.exports = cracoConfig;
Thanks for the workaround @jdt3969 . I have now updated my sample repo to contain your suggested fix in the "workaround" branch. After applying your changes, storybook is now stuck at a "spinner" loading state.
I need to find some time to work out why it doesn't work with the new storybook but it's not currently affecting me and my free time is limited so it's not high on my priority list atm, if someone wants to find a clean solution and PR I will merge but for now it will have to wait till I'm less busy.
@kumikumi Pulled your example repo and got the workaround
branch to work by updating versions to what I'm using in my project. Change to these versions:
"@craco/craco": "7.0.0-alpha.3"
"storybook-preset-craco": "artisanofcode/storybook-preset-craco"
(Using the github link to this project because the most recent changes haven't been published to npm)
[...] storybook is now stuck at a "spinner" loading state.
Summary: try npm install @storybook/preset-create-react-app@latest
Check you version of @storybook/preset-create-react-app
(npm ls @storybook/preset-create-react-app
). storybook-preset-craco
allows any version above 3.1.5
but you need a more recent version to work with web pack 5. Since npm
will respect your package-lock.json
when it can, if you've ever installed an older version of @storybook/preset-create-react-app
you can end up with an older version.
To fix this: install the latest version (npm install @storybook/preset-create-react-app@latest
). You can even remove the @storybook/preset-create-react-app
dependency from your package.json
after you do this, since the important thing was updating package-lock.json
.
Description
Here's a sample repo with react-scripts 5. Storybook works with
"@storybook/preset-create-react-app"
but doesn't work after swapping it to"storybook-preset-craco"
Expected behavior
yarn storybook
makes storybook build successfully.Actual behavior
Get lots of errors like this:
Steps to Reproduce
Sample repo https://github.com/kumikumi/storybook-craco-react-scripts-webpack5
Your environment
node.js version v17.8.0