Storybook 未加载故事：错误“无法加载故事‘*’：”

Question

I am a complete novice to React. I switched to a new laptop using a project that worked on my old laptop. For some reason it is not working now. I am getting the following errors. Error shown on console

Storybook picture

I downloaded the lastest versions node and npm so I think that might be a cause of the issue.

I do not have babel in my project so many of the solutions I have found on here do not work for me.

I tired to clear the cache in node modules and that did not work

Really apprectiate if someone could point me in the right direction!!

Answer 1

As you suggest, the latest version of node and/or npm could be the issue. It may be good to look in your babelrc file. This could be something like babel.config.js or.babelrc depending on your project. Babel config files are notorious for causing some issues with newer versions of Storybook.

The few times I have hit this error it is due to something in the babelrc, usually a plugin. A common culprit is the common-js transform module plugin.

Look for either common-js under preset-env like below:

      {
        modules: 'commonjs', <-- set this to false
        targets: {
          node: 'current'
        },
        loose: true

Or the standalone module babel-plugin-transform-modules-commonjs

https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs

And remove that. You may have to make sure that you main application is still able to be bundled correctly- but this can start you down the path of debugging exactly where the issue is. I would personally remove all plugins one by one and see if you have any luck.

If you have your own babelrc for the Storybook itself- perhaps look here. It may not be being utilized like you think.

https://github.com/babel/babel-loader/issues/780