After updating to 6.5 I get multiple dependency errors in build log

[giantrobotbee]

Describe the bug Upgraded to 6.5 using the script. Now I have several similar errors in the build logs:

Module not found: Error: Can't resolve 'util' in '/Users/giantrobotbee/dev/gatsby-test/node_modules/@storybook/router/dist/esm'

and

 Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/giantrobotbee/dev/gatsby-test/node_modules/@storybook/router/dist/esm/node_modules doesn't exist or is not a directory
      /Users/giantrobotbee/dev/gatsby-test/node_modules/@storybook/router/dist/node_modules doesn't exist or is not a directory
      /Users/giantrobotbee/dev/gatsby-test/node_modules/@storybook/router/node_modules doesn't exist or is not a directory
      /Users/giantrobotbee/dev/gatsby-test/node_modules/@storybook/node_modules doesn't exist or is not a directory
      /Users/giantrobotbee/dev/gatsby-test/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/giantrobotbee/dev/gatsby-test/node_modules

To Reproduce This occurs when running yarn storybook to start up the app.

System

Environment Info:

  System:
    OS: macOS 11.6.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 98.0
    Safari: 15.5
  npmPackages:
    @storybook/addon-a11y: ^6.5.3 => 6.5.3
    @storybook/addon-actions: ^6.5.3 => 6.5.3
    @storybook/addon-essentials: ^6.5.3 => 6.5.3
    @storybook/addon-graphql: ^6.2.9 => 6.2.9
    @storybook/addon-jest: ^6.5.3 => 6.5.3
    @storybook/addon-links: ^6.5.3 => 6.5.3
    @storybook/addon-storyshots: ^6.5.3 => 6.5.3
    @storybook/builder-webpack5: ^6.5.3 => 6.5.3
    @storybook/manager-webpack5: ^6.5.3 => 6.5.3
    @storybook/react: ^6.5.3 => 6.5.3```

**Additional context**
I have several aliases set up in the config file

	config.resolve.alias = {
		'@ui': path.resolve(__dirname, '..', 'src', 'components', 'ui'),
		'@components': path.resolve(__dirname, '..', 'src', 'components'),
		'@theme': path.resolve(__dirname, '..', 'src', 'theme'),
		'@utils': path.resolve(__dirname, '..', 'src', 'utils'),
		'@helpers': path.resolve(__dirname, '..', 'src', 'helpers'),
		'@hooks': path.resolve(__dirname, '..', 'src', 'hooks'),
		'@assets': path.resolve(__dirname, '..', 'src', 'assets'),
		'@providers': path.resolve(__dirname, '..', '__mocks__', 'providers'),
		'@data': path.resolve(__dirname, '..', 'src', 'data'),
	};```

but it seems to be breaking on util and not utils

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. We prioritize issues with reproductions over those without. Thank you! 🙏

[sjoqvist]

I had a similar issue, although it started with

Module not found: Error: Can't resolve '/usr/src/web/node_modules/@storybook/react/dist/esm/client/docs/config' in '/usr/src/web/node_modules/@storybook/react/dist/esm/client/docs'

It was a nightmare to debug, but in the end I found out that my .yarnclean removes docs/, which used to be okay in Storybook 6.4.x and earlier but not in 6.5 (at least until 6.5.3). Removal of docs/ is what you get by default from the template generated by yarn autoclean --init.

[bkiac]

@sjoqvist, I love you; this was my exact bug

[ndelangen]

I am investigating this.

Looks like the utils issue is resolved in 6.5.x, based on this work: https://github.com/storybookjs/storybook/pull/18412/files

I can see the CI on the main branch succeed for CRA + pnp: https://app.circleci.com/pipelines/github/storybookjs/storybook/26612/workflows/4a885968-bcc1-4a45-9eef-a174c8c4b96b/jobs/386657

[ndelangen]

@giantrobotbee Could you verify that the latest 6.5.x has this issue fixed?

[chrisodom]

Moved from 6.5.9 to 6.5.10 and the main process still seems to identify as commonjs and does not use the esm packages: ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Chris_Odom\git\dls-2.0-components.storybook\main.js from C:\Users\Chris_Odom\git\dls-2.0-components\node_modules@storybook\core-common\dist\cjs\utils\interpret-require.js not supported.

[amaschas]

I'm running into what I believe is the same issue, but using relative imports (in 6.5.10). It appears to be erroneously looking for local imports in node_modules.

resolve '~/../../src/components/Pages/ErrorPage' in '/path/to/repo/src/stories/Pages'
  Parsed request is a module
  using description file: /path/to/repo/package.json (relative path: ./src/stories/Pages)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /path/to/repo/src/stories/Pages/node_modules doesn't exist or is not a directory
      /path/to/repo/src/stories/node_modules doesn't exist or is not a directory
      /path/to/repo/src/node_modules doesn't exist or is not a directory
      looking for modules in /path/to/repo/node_modules
        /path/to/repo/node_modules/~ doesn't exist
      /Users/alexi/Documents/muse/node_modules doesn't exist or is not a directory
      /Users/alexi/Documents/node_modules doesn't exist or is not a directory
      /Users/alexi/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /path/to/repo/node_modules/react-scripts/node_modules
        /path/to/repo/node_modules/react-scripts/node_modules/~ doesn't exist
[ESLintError: [eslint] No files matching '/path/to/repo/generated-stories-entry.cjs' were found.]

[phong-lam]

Anyone has a work around on this issue? Storybook 6.5.10 is giving this issue and I do not want to go back to 6.4.x if at all possible since that has issues with React 18

[mt3o]

I just had the same issue, and indeed the .yarnclean was overly eager to clean files. Appending !@storybook/react/dist/esm/client/docs solved the issue. It was horrible to debug, and without this issue i would never figure it out. docs is a rather bad name for a must-have dir, to be honest.

[TwinkieLover]

I'm seeing this error when using Web components (Lit) + SB. Following this issue (Storybook cannot be built on packages using "type": "module" #11587) progressed me to build without errors but SB simply doesn't load content, either dev or transpired to static site. Therefore, it appears this error is an ESM implementation blocker for me, potentially others too.

info @storybook/web-components v6.5.12
info 
info => Cleaning outputDir: /Users/jamesalexander/Documents/Projects/xcelarys-only-ds/dist/ui/design-system/storybook
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jamesalexander/Documents/Projects/xcelarys-only-ds/.storybook/main.js from /Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/jamesalexander/Documents/Projects/xcelarys-only-ds/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR! 
ERR!     at interopRequireDefault (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildStaticStandalone (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-server/dist/cjs/build-static.js:105:71)
ERR!     at async buildStatic (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-server/dist/cjs/build-static.js:254:5)
ERR!  Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jamesalexander/Documents/Projects/xcelarys-only-ds/.storybook/main.js from /Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/jamesalexander/Documents/Projects/xcelarys-only-ds/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR! 
ERR!     at interopRequireDefault (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildStaticStandalone (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-server/dist/cjs/build-static.js:105:71)
ERR!     at async buildStatic (/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-server/dist/cjs/build-static.js:254:5) {
ERR!   code: 'ERR_REQUIRE_ESM'
ERR! }
/Users/jamesalexander/Documents/Projects/xcelarys-only-ds/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64
  var result = require(filePath);
               ^

[giantrobotbee]

Oh wow, so much activity I missed. I'll try again with the latest version when I get a chance.