storybook: Error when switching to webpack5 builder with ESM modules

Maybe it’s related too: https://github.com/storybookjs/storybook/issues/11587

Describe the bug When running storybook without webpack5 builder and ESM modules, everything is OK. When changing to webpack5 builder, got errors:

ModuleNotFoundError: Module not found: Error: Can't resolve '[path]/node_modules/@storybook/client-logger' in '[path]/.storybook'
Did you mean 'index.js'?
BREAKING CHANGE: The request '[path]/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 [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:1765:28
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:730:13
    at eval (eval at create ([path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:273:22
    at eval (eval at create ([path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:402:22
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:117:11
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:646:24
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:800:8
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:920:5
    at [path]/node_modules/neo-async/async.js:6883:13
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:837:17
    at finishResolved ([path]/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:278:11)
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:342:25
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:409:24
    at eval (eval at create ([path]/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:1:1), <anonymous>:27:1)
resolve '[path]/node_modules/@storybook/client-logger' in '[path]/.storybook'
  using description file: [path]/package.json (relative path: ./.storybook)
    Field 'browser' doesn't contain a valid alias configuration
    root path [path]
      using description file: [path]/package.json (relative path: .[path]/node_modules/@storybook/client-logger)
        Field 'browser' doesn't contain a valid alias configuration
        [path]/node_modules/@storybook/client-logger doesn't exist
    using description file: [path]/package.json (relative path: ./node_modules/@storybook/client-logger)
      Field 'browser' doesn't contain a valid alias configuration
      [path]/node_modules/@storybook/client-logger is not a file

To Reproduce Complicate because it’s a private repo for now. I will try to reproduce this soon in small repo.

System

Environment Info:

  System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
  Binaries:
    Node: 16.1.0 - /usr/local/bin/node
    npm: 7.11.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    @storybook/addon-essentials: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/addon-knobs: 6.3.0-alpha.21 => 6.3.0-alpha.21 
    @storybook/addon-links: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/addons: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/builder-webpack5: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/react: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/theming: 6.3.0-alpha.27 => 6.3.0-alpha.27

About this issue

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

Most upvoted comments

I was getting the same the last few days with @storybook/builder-webpack5": "^6.3.0-alpha.28.

Updated this evening to @storybook/builder-webpack5": "^6.3.0-alpha.29 but now getting:

ModuleNotFoundError: Module not found: Error: Can't resolve 'telejson' in '/Users/path-to-my-repo/node_modules/@storybook/channel-postmessage/dist/esm'

em2724 on May 17, 2021

I fixed my issue with:

  webpackFinal(config) {
    config.module.rules.push({
      test: /\.(js|mjs|jsx)$/,
      enforce: 'pre',
      loader: require.resolve('source-map-loader'),
      resolve: {
        fullySpecified: false,
      },
    })
    return config;
  }

bertho-zero on Dec 22, 2021

If I pin telejson to version 5.3.0 then I see the first issue:

ModuleNotFoundError: Module not found: Error: Can't resolve './dom-event' in '/Users/adam.ayres/dev/lia/aurora/node_modules/@storybook/builder-webpack5/node_modules/@storybook/channel-postmessage/node_modules/telejson/dist'

If I use the latest, 5.3.1, then I see the secondary issue reported:

ModuleNotFoundError: Module not found: Error: Can't resolve 'telejson' in '/Users/path-to-my-repo/node_modules/@storybook/channel-postmessage/dist/esm'

If I pin telejson to version 5.2.0 then I do not see either of these issues. ~~Furthermore, I was able to reproduce both of the issues using both Storybook version 6.2.9 and 6.3.0-alpha.29 when using webpack 5~~. Correction: I was only able to reproduce this when using "@storybook/builder-webpack5": "6.3.0-alpha.29". Since I use npm as opposed to yarn, I pinned telejson to 5.2.0 using npm-force-resolutions. Something like this in package.json:

"scripts": {
  "preinstall": "npx npm-force-resolutions"
},
"resolutions": {
  "telejson": "5.2.0"
}

These two issues appear to be related to these two changes in telejson:

https://github.com/storybookjs/telejson/issues/65 https://github.com/storybookjs/telejson/pull/67

cc @ndelangen

adamayres on May 18, 2021

@shilman I spent a lot of time to find the problem. I ended up changing the position of storybook in my mono repo, and started from a base with npx sb@next init --builder webpack5, and everything works fine with the last version of webpack5 builder now.

Thanks a lot for the corrections 😃

ohardy on May 25, 2021

With last version (v6.3.0-alpha.41), issue is not same anymore (I updated everything following #15001).

Now, the error is:

ERR! Error: Cannot find module '../presets/manager-preset'
ERR! Require stack:
ERR! - [path]/node_modules/@storybook/manager-webpack5/dist/cjs/index.js
ERR! - [path]/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js
...

ohardy on May 24, 2021

@ndelangen @eirslett I pinned to 5.3.2 and can confirm that this fixed the problem for me.

adamayres on May 18, 2021

@ndelangen I’m not sure if this is the thing.

Firstly, the module field incorrectly points to dist/index.mjs. https://github.com/storybookjs/telejson/blob/master/package.json#L29, maybe webpack try this field first and fails.

And for .mjs extensions, plain ESM should be used, but lodash/get is obviously not. Can we rewrite it to lodash-es/get after compiling?

JounQin on May 18, 2021