Storybook build fails in CI environment with error Error: Cannot find module 'react/package.json' #17448
Comments
|
Same issue here, after change to use Preact instead of React. {
"private": true,
"dependencies": {
// ...
"next": "~12.0.11-canary.15",
"next-plugin-preact": "~3.0.6",
"preact": "~10.6.6",
"preact-render-to-string": "~5.1.19",
"react": "npm:@preact/compat",
"react-dom": "npm:@preact/compat",
"react-ssr-prepass": "npm:preact-ssr-prepass"
},
"devDependencies": {
// ...
"@babel/core": "~7.17.2",
"@storybook/addon-actions": "~6.4.19",
"@storybook/addon-essentials": "~6.4.19",
"@storybook/addon-links": "~6.4.19",
"@storybook/addon-postcss": "~2.0.0",
"@storybook/addons": "~6.4.19",
"@storybook/builder-webpack5": "~6.4.19",
"@storybook/manager-webpack5": "~6.4.19",
"@storybook/preact": "~6.4.19",
"@storybook/theming": "~6.4.19",
"@types/node": "~17.0.16",
"@types/react": "~17.0.39",
"babel-loader": "~8.2.3",
"babel-plugin-macros": "~3.1.0",
"next-compose-plugins": "~2.2.1",
"storybook-addon-linguijs": "~1.0.10",
"typescript": "~4.5.5"
},
"resolutions": {
"webpack": "^5"
},
"engines": {
"node": ">=14.18.3 <15",
"npm": ">=6.14.15 <7"
}
}Log details!yarn storybook:build
yarn run v1.22.17
$ yarn lingui:compile
$ lingui compile --strict
Compiling message catalogs…
Done!
$ build-storybook -o ./public/sb
info @storybook/preact v6.4.19
info
info => Cleaning outputDir: /public/sb
info => Loading presets
WARN Failed to load preset: "/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js"
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at resolveFileName (/node_modules/resolve-from/index.js:29:39)
ERR! at resolveFrom (/node_modules/resolve-from/index.js:43:9)
ERR! at module.exports (/node_modules/resolve-from/index.js:46:47)
ERR! at Object.<anonymous> (/node_modules/@storybook/ui/paths.js:17:18)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR! at Module.require (internal/modules/cjs/loader.js:974:19)
ERR! at require (internal/modules/cjs/helpers.js:93:18)
ERR! at Object.<anonymous> (/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:61:38)
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at resolveFileName (/node_modules/resolve-from/index.js:29:39)
ERR! at resolveFrom (/node_modules/resolve-from/index.js:43:9)
ERR! at module.exports (/node_modules/resolve-from/index.js:46:47)
ERR! at Object.<anonymous> (/node_modules/@storybook/ui/paths.js:17:18)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR! at Module.require (internal/modules/cjs/loader.js:974:19)
ERR! at require (internal/modules/cjs/helpers.js:93:18)
ERR! at Object.<anonymous> (/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:61:38) {
ERR! code: 'MODULE_NOT_FOUND',
ERR! path: '/node_modules/react/package.json'
ERR! }
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:99:19)
ERR! at _default (/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js:196:46)
ERR! at async Object.build (/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:165:16)
ERR! at async Promise.all (index 1)
ERR! at async buildStaticStandalone (/node_modules/@storybook/preact/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR! at async buildStatic (/node_modules/@storybook/preact/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5)
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:99:19)
ERR! at _default (/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js:196:46)
ERR! at async Object.build (/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:165:16)
ERR! at async Promise.all (index 1)
ERR! at async buildStaticStandalone (/node_modules/@storybook/preact/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR! at async buildStatic (/node_modules/@storybook/preact/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5) {
ERR! code: 'MODULE_NOT_FOUND',
ERR! path: '/node_modules/react/package.json'
ERR! }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. |
|
Demonstration of the issue with a fresh app: npx yarn init -yp; npx yarn
npx sb init --type preact
yarn add \
preact \
react@npm:@preact/compat \
react-dom@npm:@preact/compat \
react-ssr-prepass@npm:preact-ssr-prepass \
preact-render-to-string
yarn build-storybook |
|
Having the same problem outside of a CI enviroment #17585 |
|
Same issue. I tried downgrading I also tried upgrading storybook preact and friends to 6.5.0-alpha.44, however there were multiple errors... I had to install some extra deps, nbd, but still same react error. So basically I think storybook 6 cannot use preact. However, that means that I cannot use storybook with my nextjs app that uses preact, because I have to alias preact to react in order to use: So then I have to remove preact entirely if I wish to use storybook. |
|
Guys, I have the same problem and I'll tell you how I solved it temporarily About the problemThe package @storybook/ui has a peerDependency with react and react-dom. Inside of this package, a file was created where react and react-dom is used as a webpack alias and that file has the path to the libraries statically defined The storybook iframe webpack config file also has a static reference to react Webpack alias (not works)I thought overriding the webpack alias would solve the problem, but that didn't work because the error happens before the // .storybook/main.js
const path = require('path');
module.exports = {
webpackFinal: (config) => {
config.resolve.alias = {
...config.resolve.alias,
react: path.resolve(__dirname, '../node_modules/preact/compat'),
'react-dom': path.resolve(__dirname, '../node_modules/preact/compat'),
};
return config;
},
};Click here to see details!
Manually fixI changed the files below manually including the path to Preact instead of React and it worked 🎉
Click here to see details!
Using patch-packageUsing the patch-package I created a patch update that automatically, after installing, replaces React path by Preact. Click here to see details!# This file is called `./patches/@storybook+builder-webpack5+6.5.0-alpha.38.patch`
diff --git a/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js b/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js
index 2017433..d022183 100644
--- a/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js
+++ b/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js
@@ -195,8 +195,8 @@ var _default = async function _default(options) {
modules: ['node_modules'].concat(envs.NODE_PATH || []),
mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? _paths.default : {}), storybookPaths), {}, {
- react: _path.default.dirname(require.resolve('react/package.json')),
- 'react-dom': _path.default.dirname(require.resolve('react-dom/package.json'))
+ react: _path.default.dirname(require.resolve('preact/compat/package.json')),
+ 'react-dom': _path.default.dirname(require.resolve('preact/compat/package.json'))
}),
fallback: {
path: require.resolve('path-browserify')# This file is called `./patches/@storybook+ui+6.5.0-alpha.38.patch`
diff --git a/node_modules/@storybook/ui/paths.js b/node_modules/@storybook/ui/paths.js
index 935886a..4c52985 100644
--- a/node_modules/@storybook/ui/paths.js
+++ b/node_modules/@storybook/ui/paths.js
@@ -14,6 +14,6 @@ module.exports = {
'@storybook/router': dirname(resolve('@storybook/router/package.json')),
'@storybook/theming': dirname(resolve('@storybook/theming/package.json')),
'@storybook/ui': dirname(resolve('@storybook/ui/package.json')),
- react: dirname(resolve('react/package.json')),
- 'react-dom': dirname(resolve('react-dom/package.json')),
+ react: dirname(resolve('preact/compat/package.json')),
+ 'react-dom': dirname(resolve('preact/compat/package.json')),
}; |
|
I have a slightly different brand of this issue: I’m not even using React/Preact. I’m using Vue. Locally, building Storybook works fine, but in CI (GitLab CI in my case), this error occurs. |
I was having the same issue but running @storybook/angular v6.5.0-beta.6. My package-lock.json was generated using Node 16 LTS and NPM 8.5.5 and the CI is using Node 14 LTS with NPM 6.14.17. |
|
I also experienced this problem when I had a mismatch between the version of My team uses When the CI build tried to run (using
Edit: the fix above worked with
|
|
I can relate that downgrading to node14 and npm 6 fixed the problem for me |
I want to add a bit of context to my previous answer. I'am now running Multiple Webpack versions
{
...
"devDependencies": {
...
"webpack": "5.70.0",
},
"overrides": {
"webpack": "5.70.0"
}
}cannot find module 'react/package.json'I had to remove the node polyfillI had to add the |
shilman
added
dependencies
yarn / npm
|
The workaround in #18314 worked for me ( |
|
@drianoaz your suggestion to use |
|
Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.60 containing PR #20110 that references this issue. Upgrade today to the Closing this issue. Please re-open if you think there's still more to do. |
Describe the bug
See below error in CI and surprisingly it works without any issue on my local machine.
To Reproduce
The issue occurs in github actions CI.
System
Environment Info:
System:
OS: macOS 12.0.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Chrome: 98.0.4758.80
Firefox: 88.0.1
Safari: 15.1
npmPackages:
@storybook/addon-a11y: ^6.4.18 => 6.4.18
@storybook/addon-actions: ^6.4.18 => 6.4.18
@storybook/addon-backgrounds: ^6.4.18 => 6.4.18
@storybook/addon-docs: ^6.4.18 => 6.4.18
@storybook/addon-knobs: ^6.1.14 => 6.4.0
@storybook/addon-viewport: ^6.4.18 => 6.4.18
@storybook/addons: ^6.4.18 => 6.4.18
@storybook/builder-webpack5: ^6.4.18 => 6.4.18
@storybook/manager-webpack5: ^6.4.18 => 6.4.18
@storybook/preset-create-react-app: ^4.0.0 => 4.0.0
@storybook/react: ^6.4.18 => 6.4.18
@storybook/theming: ^6.4.18 => 6.4.18
Additional context
I have react and react-dom in peerdeps in package.json
The text was updated successfully, but these errors were encountered: