Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with starting Storybook after upgrading to CRA 5 #17454

Closed
corymharper opened this issue Feb 9, 2022 · 12 comments
Closed

Issues with starting Storybook after upgrading to CRA 5 #17454

corymharper opened this issue Feb 9, 2022 · 12 comments
Labels

Comments

@corymharper
Copy link

Describe the bug
I'm in the process of upgrading some of the front ends in our repository to CRA 5 from 4.0.3. I've ran into a hiccup while upgrading with Storybook, I ran through the steps in https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade and used the automigrate method. I also upgraded @storybook/preset-create-react-app to 4.0.0. I will note that we are using yarn with workspaces and that might be a part of the source of the issues. Anyway, here is the error that I'm currently dealing with:

info @storybook/react v6.4.18
info 
(node:65168) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ./public at /
info => Loading Webpack configuration from `../../../.yarn/__virtual__/react-scripts-virtual-a9dbc2f769/0/cache/react-scripts-patch-d41c62c399-9798db6b7c.zip/node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Loading custom Webpack config (full-control mode).
<s> [webpack.Progress] 0% 

<s> [webpack.Progress] 1% setup initialize
<s> [webpack.Progress] 1% setup initialize HtmlWebpackPlugin
<s> [webpack.Progress] 1% setup initialize
<i> [webpack-dev-middleware] wait until bundle finished
<s> [webpack.Progress] 3% setup watch run
<s> [webpack.Progress] 3% setup watch run VirtualModulesPlugin
<s> [webpack.Progress] 3% setup watch run ForkTsCheckerWebpackPlugin
<s> [webpack.Progress] 3% setup watch run webpack-dev-middleware
<s> [webpack.Progress] 3% setup watch run
<s> [webpack.Progress] 4% setup normal module factory
<s> [webpack.Progress] 4% setup normal module factory CaseSensitivePathsPlugin
<s> [webpack.Progress] 4% setup normal module factory ModuleNotFoundPlugin
<s> [webpack.Progress] 4% setup normal module factory IgnorePlugin
<s> [webpack.Progress] 4% setup normal module factory
<s> [webpack.Progress] 5% setup context module factory
<s> [webpack.Progress] 5% setup context module factory IgnorePlugin
<s> [webpack.Progress] 5% setup context module factory
<s> [webpack.Progress] 6% setup before compile
<s> [webpack.Progress] 6% setup before compile ProgressPlugin
<s> [webpack.Progress] 6% setup before compile ProgressPlugin
<s> [webpack.Progress] 6% setup before compile
<s> [webpack.Progress] 7% setup compile
<s> [webpack.Progress] 7% setup compile ExternalsPlugin
<s> [webpack.Progress] 7% setup compile
<s> [webpack.Progress] 8% setup compilation
<s> [webpack.Progress] 8% setup compilation ArrayPushCallbackChunkFormatPlugin
<s> [webpack.Progress] 8% setup compilation JsonpChunkLoadingPlugin
<s> [webpack.Progress] 8% setup compilation StartupChunkDependenciesPlugin
<s> [webpack.Progress] 8% setup compilation ImportScriptsChunkLoadingPlugin
<s> [webpack.Progress] 8% setup compilation FetchCompileWasmPlugin
<s> [webpack.Progress] 8% setup compilation FetchCompileAsyncWasmPlugin
<s> [webpack.Progress] 8% setup compilation WorkerPlugin
<s> [webpack.Progress] 8% setup compilation SplitChunksPlugin
<s> [webpack.Progress] 8% setup compilation RuntimeChunkPlugin
<s> [webpack.Progress] 8% setup compilation ResolverCachePlugin
<s> [webpack.Progress] 8% setup compilation HtmlWebpackPlugin
<s> [webpack.Progress] 8% setup compilation
<s> [webpack.Progress] 9% setup compilation
<s> [webpack.Progress] 9% setup compilation DefinePlugin
<s> [webpack.Progress] 9% setup compilation ProvidePlugin
<s> [webpack.Progress] 9% setup compilation HotModuleReplacementPlugin
<s> [webpack.Progress] 9% setup compilation ProgressPlugin
<s> [webpack.Progress] 9% setup compilation InterpolateHtmlPlugin
<s> [webpack.Progress] 9% setup compilation EntryPlugin
<s> [webpack.Progress] 9% setup compilation DefinePlugin
<s> [webpack.Progress] 9% setup compilation ProvidePlugin
<s> [webpack.Progress] 9% setup compilation ReactRefreshPlugin
<s> [webpack.Progress] 9% setup compilation ForkTsCheckerWebpackPlugin
<s> [webpack.Progress] 9% setup compilation DocGenPlugin
/Users/coryharper/Documents/main-stack/.pnp.cjs:43741
    throw firstError;
    ^

Error: Qualified path resolution failed - none of those files can be found on the disk.

Source path: /Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-150d9cdfea/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/util/makeSerializable.js
Not found: /Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-150d9cdfea/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/util/makeSerializable.js
Not found: /Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-150d9cdfea/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/util/makeSerializable.js.js
Not found: /Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-150d9cdfea/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/util/makeSerializable.js.json
Not found: /Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-150d9cdfea/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/util/makeSerializable.js.node
Not found: /Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-150d9cdfea/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/util/makeSerializable.js.handlebars
Not found: /Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-150d9cdfea/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/util/makeSerializable.js.hbs

Require stack:
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-react-docgen-typescript-plugin-virtual-ed9d6bdb72/0/cache/@storybook-react-docgen-typescript-plugin-npm-1.0.2-canary.253f8c1.0-7504ff2ea3-7d2d1309e9.zip/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-react-docgen-typescript-plugin-virtual-ed9d6bdb72/0/cache/@storybook-react-docgen-typescript-plugin-npm-1.0.2-canary.253f8c1.0-7504ff2ea3-7d2d1309e9.zip/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-react-docgen-typescript-plugin-virtual-ed9d6bdb72/0/cache/@storybook-react-docgen-typescript-plugin-npm-1.0.2-canary.253f8c1.0-7504ff2ea3-7d2d1309e9.zip/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-react-virtual-a09892564e/0/cache/@storybook-react-npm-6.4.18-2d7fd2064a-0a2d5f16fa.zip/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-core-common-virtual-a2eb2b0d43/0/cache/@storybook-core-common-npm-6.4.18-2132b40ce2-4fbedd23c1.zip/node_modules/@storybook/core-common/dist/cjs/presets.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-core-common-virtual-a2eb2b0d43/0/cache/@storybook-core-common-npm-6.4.18-2132b40ce2-4fbedd23c1.zip/node_modules/@storybook/core-common/dist/cjs/index.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-core-server-virtual-1a2338290a/0/cache/@storybook-core-server-npm-6.4.18-75c5ce499d-b99595588d.zip/node_modules/@storybook/core-server/dist/cjs/index.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-core-virtual-d0645b54f3/0/cache/@storybook-core-npm-6.4.18-4cebdc9f97-f74078b1c9.zip/node_modules/@storybook/core/dist/cjs/server.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-core-virtual-d0645b54f3/0/cache/@storybook-core-npm-6.4.18-4cebdc9f97-f74078b1c9.zip/node_modules/@storybook/core/server.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-react-virtual-a09892564e/0/cache/@storybook-react-npm-6.4.18-2d7fd2064a-0a2d5f16fa.zip/node_modules/@storybook/react/dist/cjs/server/index.js
- /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-react-virtual-a09892564e/0/cache/@storybook-react-npm-6.4.18-2d7fd2064a-0a2d5f16fa.zip/node_modules/@storybook/react/bin/index.js
    at Function.external_module_.Module._resolveFilename (/Users/coryharper/Documents/main-stack/.pnp.cjs:43740:55)
    at Function.external_module_.Module._load (/Users/coryharper/Documents/main-stack/.pnp.cjs:43539:48)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-react-docgen-typescript-plugin-virtual-ed9d6bdb72/0/cache/@storybook-react-docgen-typescript-plugin-npm-1.0.2-canary.253f8c1.0-7504ff2ea3-7d2d1309e9.zip/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js:6:55)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.external_module_.Module._load (/Users/coryharper/Documents/main-stack/.pnp.cjs:43589:14)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /Users/coryharper/Documents/main-stack/.yarn/__virtual__/@storybook-react-docgen-typescript-plugin-virtual-ed9d6bdb72/0/cache/@storybook-react-docgen-typescript-plugin-npm-1.0.2-canary.253f8c1.0-7504ff2ea3-7d2d1309e9.zip/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:108:42
    at Hook.eval [as call] (eval at create (/Users/coryharper/Documents/main-stack/.yarn/cache/tapable-npm-2.2.1-8cf5ff3039-3b7a1b4d86.zip/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:291:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/coryharper/Documents/main-stack/.yarn/cache/tapable-npm-2.2.1-8cf5ff3039-3b7a1b4d86.zip/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-94709e48b8/0/cache/webpack-npm-5.68.0-f34609ad11-ac6efd861a.zip/node_modules/webpack/lib/Compiler.js:1109:26)
    at /Users/coryharper/Documents/main-stack/.yarn/__virtual__/webpack-virtual-94709e48b8/0/cache/webpack-npm-5.68.0-f34609ad11-ac6efd861a.zip/node_modules/webpack/lib/Compiler.js:1153:29

I'm not entirely sure of the source of this error, but it looks like at some point another version of webpack is being used than 5.68.0, specifically 4.46.0.

To Reproduce
I don't know if this is easily reproducible.

System
Environment Info:

System:
OS: macOS 12.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 16.13.0 - /usr/local/bin/node
Yarn: 3.0.2 - /usr/local/bin/yarn
npm: 8.1.0 - /usr/local/bin/npm
Browsers:
Chrome: 98.0.4758.80
Edge: 98.0.1108.43
Firefox: 95.0.2
Safari: 15.3

Additional context
I thought I would include my package versions and storybook config/storybook webpack config in the failing project for good measure:

dependencies:

	"dependencies": {
		"@fortawesome/fontawesome-svg-core": "^1.2.36",
		"@fortawesome/free-brands-svg-icons": "^5.15.4",
		"@fortawesome/pro-duotone-svg-icons": "^5.15.4",
		"@fortawesome/pro-light-svg-icons": "^5.15.4",
		"@fortawesome/pro-regular-svg-icons": "^5.15.4",
		"@fortawesome/pro-solid-svg-icons": "^5.15.4",
		"@fortawesome/react-fontawesome": "^0.1.17",
		"@sentry/browser": "^6.17.4",
		"@stripe/react-stripe-js": "^1.7.0",
		"@stripe/stripe-js": "^1.22.0",
		"@tippyjs/react": "^4.2.6",
		"babel-plugin-macros": "^3.1.0",
		"chart.js": "^2.9.4",
		"currency.js": "^2.0.4",
		"dompurify": "^2.3.5",
		"intl-tel-input": "^17.0.13",
		"libphonenumber-js": "^1.9.47",
		"lodash": "^4.17.21",
		"logrocket": "^1.3.0",
		"marked": "^3.0.8",
		"micromodal": "^0.4.10",
		"polished": "^4.1.4",
		"react": "^17.0.2",
		"react-accessible-dropdown-menu-hook": "^3.2.0",
		"react-animate-height": "^2.0.23",
		"react-dom": "^17.0.2",
		"react-helmet": "^6.1.0",
		"react-is": "^17.0.2",
		"react-plaid-link": "^3.3.0",
		"react-redux": "^7.2.6",
		"react-router-dom": "^5.3.0",
		"react-scripts": "5.0.0",
		"redux": "^4.1.2",
		"redux-thunk": "^2.4.1",
		"require-context.macro": "^1.2.2",
		"styled-components": "^5.3.3",
		"tippy.js": "6.3.1",
		"typescript": "~4.3.5",
		"zxcvbn": "^4.4.2"
	},
	"devDependencies": {
		"@mdx-js/react": "^1.6.22",
		"@storybook/addon-actions": "^6.4.18",
		"@storybook/addon-essentials": "^6.4.18",
		"@storybook/builder-webpack5": "^6.4.18",
		"@storybook/manager-webpack5": "^6.4.18",
		"@storybook/node-logger": "^6.4.18",
		"@storybook/preset-create-react-app": "4.0.0",
		"@storybook/react": "^6.4.18",
		"@testing-library/dom": "^8.11.3",
		"@testing-library/jest-dom": "^5.16.2",
		"@testing-library/react": "^12.1.2",
		"@testing-library/react-hooks": "^7.0.2",
		"@testing-library/user-event": "^13.5.0",
		"@types/chart.js": "^2.9.35",
		"@types/dompurify": "^2.3.3",
		"@types/intl-tel-input": "^17.0.4",
		"@types/jest": "^27.4.0",
		"@types/lodash": "^4.14.178",
		"@types/marked": "^3.0.1",
		"@types/micromodal": "^0.3.3",
		"@types/node": "^16.11.22",
		"@types/react": "^17.0.39",
		"@types/react-dom": "^17.0.11",
		"@types/react-helmet": "^6.1.5",
		"@types/react-is": "^17.0.3",
		"@types/react-redux": "^7.1.22",
		"@types/react-router-dom": "^5.3.3",
		"@types/redux-logger": "^3.0.9",
		"@types/styled-components": "^5.1.21",
		"@types/testing-library__jest-dom": "^5.14.2",
		"@types/webpack-env": "^1.16.3",
		"@types/zxcvbn": "^4.4.1",
		"@typescript-eslint/parser": "^5.10.2",
		"chromatic": "^6.4.3",
		"jest-junit": "^13.0.0",
		"redux-logger": "^3.0.6",
		"webpack": "^5.68.0"
	},

storybook configs:

// .storybook/main.js
module.exports = {
  stories: ['../src/components/**/*.stories.tsx'],
  addons: ['@storybook/preset-create-react-app', {
    name: '@storybook/addon-essentials',
    options: {
      backgrounds: false
    }
  }],
  core: {
    builder: "webpack5"
  }
};

// .storybook/webpack.config.js
module.exports = async ({ config }) => {
	config.resolve = {
		...config.resolve,
		symlinks: false,
	};
	
	return config;
};
@corymharper
Copy link
Author

I think I more or less confirmed that the issue was @storybook-react-docgen-typescript-plugin 4.46.0, it has a peer dependency of webpack >= 4 which is maybe enabling it to use that version, so I added "webpack": "^5.68.0" to my resolutions field in the package.json and that solved that problem, but opens up cascading problems for packages unrelated to storybook.

@corymharper
Copy link
Author

Not exactly unrelated, docgen depends on Node polyfills and I think is a dependency of Storybook, and those pollyfills aren't automatically available in webpack 5, but Storybook doesn't seem to do anything to bridge the gap itself.

@corymharper
Copy link
Author

Also relevant, we use Yarn Plug'N'Play.

@WoodyWoodsta
Copy link

I'm getting exactly the same issue, after moving our project over to Plug'n'Play.

@corymharper
Copy link
Author

I'm getting exactly the same issue, after moving our project over to Plug'n'Play.

If it saves you any time, what I did to temporarily resolve the issue was resolve webpack to ^5.68.0 using the resolutions field in my package.json, that might not be a suitable solution for everyone though.

@yuhs0
Copy link

yuhs0 commented Feb 16, 2022

I'm getting exactly the same issue too.
So I add "resolutions": { "webpack": "^5.68.0" }, to my package.json.

Then not found package error occur @mdx-js/react, @storybook/addon-docs and assert.
After yarn add -D @mdx-js/react @storybook/addon-docs assert, success yarn storybook.
But Introduction menu in browser, error occur TypeError (0 , _mdx_js_react__WEBPACK_IMPORTED_MODULE_10__.mdx) is not a function..
However other menu looks good.

@WoodyWoodsta
Copy link

In a complex Storybook project (such as mine), setting a resolution at the top level isn't possible. I found the issue to be resolved by updating @storybook/react to 6.5.0-alpha.39 as per #15336 (comment)

@corymharper
Copy link
Author

In a complex Storybook project (such as mine), setting a resolution at the top level isn't possible. I found the issue to be resolved by updating @storybook/react to 6.5.0-alpha.39 as per #15336 (comment)

This worked in our particular case because we upgraded all of our microservices to use Webpack 5 exclusively at the same time.

@davidcalhoun
Copy link

davidcalhoun commented Feb 27, 2022

Thank you @WoodyWoodsta, that worked for me! Note: using the latest alpha which is 6.5.0-alpha.42

// package.json
{
    "resolutions": {
        ...,
+        "@storybook/react": "6.5.0-alpha.42"
    },
    ...
}

EDIT: quick update, it appears the original issue is no longer happening with @storybook/*@6.5.9, so you should be able to remove the above workaround once you upgrade.

@arlyon
Copy link

arlyon commented Apr 5, 2022

Chiming in to say thanks for this. I originally thought it was this issue, so linking for visibility: #15336

@andreyselin
Copy link

andreyselin commented Apr 12, 2023

Got this problem with react script 5.0.1 and storybook 7.0.3
Noticed that I had package-lock.json alongside with yarn.lock

Removed package-lock.json and node_modules and ran yarn
Then npx storybook@latest init ran without errors

@shilman
Copy link
Member

shilman commented Jun 8, 2023

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

@shilman shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants