Login/Register
Storybook - Can't resolve 'generated-stories-entry.cjs' / Field 'browser' doesn't contain a valid alias configuration
Asked Answered
Solved reactjswebpackstorybook
F

2

11

After installing and configuring Storybook on my Next.js application and running build-storybook I am receiving the following error.

Note: I am using npm version 8.19.1. The project is written in Typescript.

> [email protected] storybook:build
> build-storybook

info @storybook/react v6.5.13
info 
info => Cleaning outputDir: /Users/msun/Documents/msun/storybook-static
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Using PostCSS preset with [email protected]
info => Using default Webpack5 setup
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
65% building 14/14 entries 18/18 dependencies 2/6 modulesinfo => Manager built (7.26 s)
ERR! ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/Compilation.js:2016:28
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:798:13
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:270:22
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:434:22
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:116:11
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:670:25
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:855:8
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:975:5
ERR!  ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/Compilation.js:2016:28
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:798:13
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:270:22
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:434:22
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:116:11
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:670:25
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:855:8
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:975:5
ERR! resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!   using description file: /Users/msun/Documents/msun/package.json (relative path: .)
ERR!     Field 'browser' doesn't contain a valid alias configuration
ERR!     root path /Users/msun/Documents/msun
ERR!       using description file: /Users/msun/Documents/msun/package.json (relative path: ./Users/msun/Documents/msun/generated-stories-entry.cjs)
ERR!         no extension
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!         .mjs
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.mjs doesn't exist
ERR!         .js
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.js doesn't exist
ERR!         .jsx
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.jsx doesn't exist
ERR!         .ts
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.ts doesn't exist
ERR!         .tsx
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.tsx doesn't exist
ERR!         .json
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.json doesn't exist
ERR!         .cjs
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.cjs doesn't exist
ERR!         as directory
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!     using description file: /Users/msun/Documents/msun/package.json (relative path: ./generated-stories-entry.cjs)
ERR!       no extension
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!       .mjs
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.mjs doesn't exist
ERR!       .js
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.js doesn't exist
ERR!       .jsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.jsx doesn't exist
ERR!       .ts
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.ts doesn't exist
ERR!       .tsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.tsx doesn't exist
ERR!       .json
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.json doesn't exist
ERR!       .cjs
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.cjs doesn't exist
ERR!       as directory
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
info => Loading presets
npm notice 
npm notice New major version of npm available! 8.19.1 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
npm notice Run npm install -g [email protected] to update!
npm notice
Forthcoming answered 22/11, 2022 at 17:52 Comment(0)
F
9

According to the maintainer of Storybook, there was a recent release of enhanced-resolve (a dependency of Storybook) which ended up breaking Storybook installations that use Webpack. You might be experiencing this issue if you 1) recently installed a fresh Storybook, 2) do not use package lock files, or 3) deleted your package lock files and ran install.

Workaround

Pending a permanent fix, a temporary workaround involves pinning enchanced-resolve to the latest working version 5.10.0.

Add the following line to your package.json. Delete node_modules and re-install.

npm

// package.json
{
  "overrides": {
    "enhanced-resolve": "5.10.0"
  }
}

Note: You may have to upgrade to the latest npm for the override to work. npm install -g npm@latest

Yarn

// package.json
{
  "resolutions": {
    "enhanced-resolve": "5.10.0"
  }
}

pnpm

// package.json
{
  "pnpm": {
    "overrides": {
      "enhanced-resolve": "5.10.0"
    }
  }
}

warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"

As mentioned here, a global override may be problematic for projects with dependencies that depend on a different version of enhanced-resolve. If you are experiencing the above warning, try making the override more specific (assuming your Storybook installation uses webpack5):

"webpack@5/enhanced-resolve": "5.10.0"

(Thanks to Github user pm0u)

Forthcoming answered 22/11, 2022 at 21:20 Comment(0)
O
0

if you get "property not allowed in package.json", you can use npm i [email protected] and then try "npm run storybook". It will work.

Oxidate answered 23/11, 2022 at 5:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.