[Bug]: Module not found error when using CommonJS entry point in @storybook/test

[ernestostifano]

Describe the bug

The @storybook/test package has different exported versions (entry points): ./dist/index.js and ./dist/index.mjs as described in its package.json file:

"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "node": "./dist/index.js",
    "require": "./dist/index.js",
    "import": "./dist/index.mjs"
  },
  "./package.json": "./package.json"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",

When it resolves to the ./dist/index.js version, starting/building Storybook breaks because it requires some Node.JS core modules (os and tty) that are not present in the ./dist/index.mjs version:

=> Failed to build the preview
SB_BUILDER-WEBPACK5_0002 (WebpackInvocationError): Module not found: Error: Can't resolve 'tty' in '/path/to/repository/node_modules/@storybook/test/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "tty": require.resolve("tty-browserify") }'
	- install 'tty-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "tty": false }

As to the logic leading to load one version or the other, it could depend on multiple factors, according to the spec.

In our case, we are using the following Webpack config:

config.resolve.conditionNames = [
    'browser',
    'module',
    'import',
    'require',
    'default'
];

Which makes Webpack use the exports field instead of the module field when available.

Now, this issue could be seen from different angles:

• Are the two entry points supposed to be different? If so, probably the exports field should be reviewed.
• Why are os and tty required in a package that should/could run in a browser?
• Why are you bundling this package? It produces files with more that 37K lines of code. Makes no sense if it will be bundled later anyways.

Without going into the above details, I would suggest the following easy fix:

"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "node": "./dist/index.js",
    "import": "./dist/index.mjs",
    "require": "./dist/index.js",
    "default": "./dist/index.js"
  },
  "./package.json": "./package.json"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",

Or the following if both entry points are meant for node and browser respectively:

"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "browser": "./dist/index.mjs",
    "node": "./dist/index.js",
    "default": "./dist/index.js"
  },
  "./package.json": "./package.json"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",

The order is very important.

To Reproduce

Configure your bundler to use exports, for example, using Webpack:

config.resolve.conditionNames = [
    'browser',
    'module',
    'import',
    'require',
    'default'
];

Then just build your Storybook.

System

System:
    OS: macOS 14.4.1
    CPU: (16) arm64 Apple M3 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - ~/.nvm/versions/node/v21.7.3/bin/node
    Yarn: 4.0.2 - ~/.nvm/versions/node/v21.7.3/bin/yarn <----- active
    npm: 10.5.2 - ~/.nvm/versions/node/v21.7.3/bin/npm
  Browsers:
    Chrome: 124.0.6367.92
    Edge: 124.0.2478.67
    Safari: 17.4.1
  npmPackages:
    eslint-plugin-storybook: 0.6.15 => 0.6.15 

Additional context

N/A

[ernestostifano]

If anyone has the same issue, in the meantime I use the following workaround:

// https://github.com/storybookjs/storybook/issues/26997
config.resolve.alias = {
    ...config.resolve.alias,
    '@storybook/test': resolveRoot(
        './node_modules/@storybook/test/dist/index.mjs'
    )
};

Replace resolveRoot with whatever method you want to use to resolve that to an absolute path to node_modules.

[shilman]

@kasperpeulen @yannbf can you assess how serious this is, e.g. for portable stories?