storybook: Webpack5 + type: module + addon-actions = ModuleNotFoundError

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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 11
Comments: 19 (15 by maintainers)

Commits related to this issue

demo storybookjs/storybook/issues/15335 — committed to arty-name/storybook-webpack5-module by arty-name 3 years ago
Add storybook Use empty package.json workaround from https://github.com/storybookjs/storybook/issues/15335#issuecomment-886188567 — committed to swissgeol/ngm by gberaudo 3 years ago
Add storybook Use empty package.json workaround from https://github.com/storybookjs/storybook/issues/15335#issuecomment-886188567 — committed to swissgeol/ngm by gberaudo 3 years ago
fix ModuleParseError error message ``` ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' ``` issues - https://github.com/storybookjs/storybook/is... — committed to ganezasan/hello-jest-cra-template by ganezasan a year ago
Use webpack5 (#1) * use webpack5 and type: module * uninstall tsconfig-paths-webpack-plugin * fix webpackFinal: * fix ModuleParseError error message ``` ModuleParseError: Module parse f... — committed to ganezasan/hello-jest-cra-template by ganezasan a year ago

Most upvoted comments

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.

mavidulin on Jan 14, 2022

This bug still occurs to me using the Storybook@6.5.4. The best workaround is still to create a file .storybook/package.json containing only {}.

arty-name on Jun 7, 2022

Indeed, adding the following to main.js makes the build pass:

  async webpackFinal(config) {
    config.module.rules.push({
      test: /.storybook\/preview.js/,
      resolve: { fullySpecified: false },
    })
    return config;
  },

Personally, though, I think the other workaround via package.json is cleaner. And from outside perspective, it looks like the exports of packages @storybook/client-api and @storybook/client-logger are just not configured properly.

arty-name on Jun 30, 2021

Will be fixed in 7.0

ndelangen on Jul 1, 2022

The above-mentioned solution is working here with @storybook/vue3 ^6.5.10 and webpack ^5.73.0 and the webpackFinal config definition must be used,

{
  webpackFinal: config => {
    config.module.rules.push({
      test: /\.(m?js)$/,
      type: "javascript/auto",
      resolve: {
        fullySpecified: false,
      },
    });

    return config;
  }
}

using an inline literal definition like the one below has no effect,

{
  module: {
    rules: {
      test: /\.(m?js)$/,
      type: 'javascript/auto',
      resolve: { fullySpecified: false },
    }
  }
}

iambumblehead on Aug 9, 2022

We started doing this to ensure we use the ‘correct’ babel-loader and other stuff users might have multiple versions installed of.

I think this has just become an “established pattern” to do, and we can likely start experimenting with dropping this.

ndelangen on Jul 2, 2021