Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack5 + type: module + addon-actions = ModuleNotFoundError

See original GitHub issue

Describe the bug A barebones example with type: module, Webpack5 and addon-actions results in “ModuleNotFoundError” error during the build

To Reproduce git clone git@github.com:arty-name/storybook-webpack5-module.git && git checkout module-not-found && yarn install && npx start-storybook

Added "type": "module" to package.json, configured Storybook for webpack5, added addon-actions

System

Environment Info:

  System:
    OS: Linux 5.8 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:
    Node: 16.3.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.15.1 - /usr/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.1
  npmPackages:
    @storybook/addon-actions: ^6.3.0 => 6.3.0 
    @storybook/builder-webpack5: ^6.3.0 => 6.3.0 
    @storybook/manager-webpack5: ^6.3.0 => 6.3.0 
    @storybook/react: ^6.3.0 => 6.3.0

Additional context

Deleting preview.js file makes the build pass, but the storybook is non-functional.

Adding the following lines to package.json makes the build pass:

  "browser": {
    "./node_modules/@storybook/client-api": "./node_modules/@storybook/client-api/dist/esm/index.js",
    "./node_modules/@storybook/client-logger": "./node_modules/@storybook/client-logger/dist/esm/index.js"
  }
Full error log 
info @storybook/react v6.3.0
info 
info => Loading presets
info => Loading 1 config file in "/var/www/storybook-webpack5-module/.storybook"
info => Adding stories defined in "/var/www/storybook-webpack5-module/.storybook/main.js"
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Using cached manager
99% done plugins webpack-hot-middlewarewebpack built preview 9a1a1669ce9c3d1a92b3 in 1567ms
ModuleNotFoundError: Module not found: Error: Can't resolve '/var/www/storybook-webpack5-module/node_modules/@storybook/client-api' in '/var/www/storybook-webpack5-module/.storybook'
Did you mean 'index.js'?
BREAKING CHANGE: The request '/var/www/storybook-webpack5-module/node_modules/@storybook/client-api' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:1768:28
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:732:13
    at eval (eval at create (/var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:274:22
    at eval (eval at create (/var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:403:22
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:117:11
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:648:24
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:802:8
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:922:5
    at /var/www/storybook-webpack5-module/node_modules/neo-async/async.js:6883:13
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:839:17
    at finishResolved (/var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:278:11)
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:342:25
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:409:24
    at eval (eval at create (/var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
resolve '/var/www/storybook-webpack5-module/node_modules/@storybook/client-api' in '/var/www/storybook-webpack5-module/.storybook'
  using description file: /var/www/storybook-webpack5-module/package.json (relative path: ./.storybook)
    Field 'browser' doesn't contain a valid alias configuration
    root path /var/www/storybook-webpack5-module
      using description file: /var/www/storybook-webpack5-module/package.json (relative path: ./var/www/storybook-webpack5-module/node_modules/@storybook/client-api)
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/storybook-webpack5-module/var/www/storybook-webpack5-module/node_modules/@storybook/client-api doesn't exist
    using description file: /var/www/storybook-webpack5-module/package.json (relative path: ./node_modules/@storybook/client-api)
      Field 'browser' doesn't contain a valid alias configuration
      /var/www/storybook-webpack5-module/node_modules/@storybook/client-api is not a file
ModuleNotFoundError: Module not found: Error: Can't resolve '/var/www/storybook-webpack5-module/node_modules/@storybook/client-logger' in '/var/www/storybook-webpack5-module/.storybook'
Did you mean 'index.js'?
BREAKING CHANGE: The request '/var/www/storybook-webpack5-module/node_modules/@storybook/client-logger' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:1768:28
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:732:13
    at eval (eval at create (/var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:274:22
    at eval (eval at create (/var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:403:22
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:117:11
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:648:24
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:802:8
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:922:5
    at /var/www/storybook-webpack5-module/node_modules/neo-async/async.js:6883:13
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:839:17
    at finishResolved (/var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:278:11)
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:342:25
    at /var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:409:24
    at eval (eval at create (/var/www/storybook-webpack5-module/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
resolve '/var/www/storybook-webpack5-module/node_modules/@storybook/client-logger' in '/var/www/storybook-webpack5-module/.storybook'
  using description file: /var/www/storybook-webpack5-module/package.json (relative path: ./.storybook)
    Field 'browser' doesn't contain a valid alias configuration
    root path /var/www/storybook-webpack5-module
      using description file: /var/www/storybook-webpack5-module/package.json (relative path: ./var/www/storybook-webpack5-module/node_modules/@storybook/client-logger)
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/storybook-webpack5-module/var/www/storybook-webpack5-module/node_modules/@storybook/client-logger doesn't exist
    using description file: /var/www/storybook-webpack5-module/package.json (relative path: ./node_modules/@storybook/client-logger)
      Field 'browser' doesn't contain a valid alias configuration
      /var/www/storybook-webpack5-module/node_modules/@storybook/client-logger is not a file

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:8
  • Comments:18 (14 by maintainers)

github_iconTop GitHub Comments

3reactions
mavidulincommented, Jan 14, 2022

For anyone ending up here, the only thing that worked for me was adding this to main.js:

async webpackFinal(config) {
    config.module.rules.push({
      resolve: { fullySpecified: false },
    })
    return config;
},

Note that a solution proposed in other comments contained test: /.storybook\/preview.js/,, but for me, the build passed only when I removed that line.

2reactions
ndelangencommented, Jul 1, 2022

Will be fixed in 7.0

Read more comments on GitHub >

github_iconTop Results From Across the Web

Storybook error when using Webpack5 with Next.JS app + ...
Resolved this by installing webpack. If webpack^5.x.x is not installed, just install with npm i -D webpack@^5.x.x..
Read more >
Storybook Addon Next
Statically imported images won't load; This addon breaks when the .mjs extension for the next config is used; Module not found: Error: Can't...
Read more >
module-not-found - Next.js
A module not found error can occur for many different reasons: The module you're trying to import is not installed in your dependencies;...
Read more >
can't resolve 'file-loader' | The AI Search Engine You Control
Webpack : cannot resolve module 'file-loader' ... Module not found: Error: Can't resolve 'ts-loader' ... vue-loader/lib/selector.js?type=script&index=0!
Read more >
How I solved and debugged my Webpack issue through trial ...
module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Storybook build fails with "Cannot find module 'webpack/lib/util/makeSerializable.js" after upgrading storybook packages to 6.3.0

Next page

argTypes table is not generated for components with React.forwardRef and index type in their interface (with typescript)