Error: Cannot find module '@storybook/builder-storybook-builder-vite'

[mrmartineau]

Hi @eirslett, when running my Storybook locally, in dev mode, I get the error below:

I can confirm that I have installed your package and updated my config in main.js. The only two differences with my project and your example, is that mine uses Typescript and environment variables in some places. Typescript was working fine before, but the env vars are new (I use import.meta.env like the Vite docs specify), which is the reason for trying this plugin.

Let me know if you want me to try something or have any questions.

$ start-storybook -p 6006 -s public
info @storybook/react v6.2.8
info
ERR! Error: Cannot find module '@storybook/builder-storybook-builder-vite'
ERR! Require stack:
ERR! - /Users/my/project/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js
ERR! - /Users/my/project/node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! - /Users/my/project/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/my/project/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/my/project/node_modules/@storybook/core/server.js
ERR! - /Users/my/project/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - /Users/my/project/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at require (internal/modules/cjs/helpers.js:88:18)
ERR!     at /Users/my/project/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:34:36
ERR!     at processTicksAndRejections (internal/process/task_queues.js:93:5)
ERR!     at async getPreviewBuilder (/Users/my/project/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:33:24)
ERR!     at async buildDevStandalone (/Users/my/project/node_modules/@storybook/core-server/dist/cjs/build-dev.js:97:24)
ERR!     at async buildDev (/Users/my/project/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
ERR!  Error: Cannot find module '@storybook/builder-storybook-builder-vite'
ERR! Require stack:
ERR! - /Users/my/project/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js
ERR! - /Users/my/project/node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! - /Users/my/project/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/my/project/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/my/project/node_modules/@storybook/core/server.js
ERR! - /Users/my/project/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - /Users/my/project/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at require (internal/modules/cjs/helpers.js:88:18)
ERR!     at /Users/my/project/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:34:36
ERR!     at processTicksAndRejections (internal/process/task_queues.js:93:5)
ERR!     at async getPreviewBuilder (/Users/my/project/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:33:24)
ERR!     at async buildDevStandalone (/Users/my/project/node_modules/@storybook/core-server/dist/cjs/build-dev.js:97:24)
ERR!     at async buildDev (/Users/my/project/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/Users/my/project/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js',
ERR!     '/Users/my/project/node_modules/@storybook/core-server/dist/cjs/build-static.js',
ERR!     '/Users/my/project/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     '/Users/my/project/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     '/Users/my/project/node_modules/@storybook/core/server.js',
ERR!     '/Users/my/project/node_modules/@storybook/react/dist/cjs/server/index.js',
ERR!     '/Users/my/project/node_modules/@storybook/react/bin/index.js'
ERR!   ]
ERR! }

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

error Command failed with exit code 1.

Thanks in advance

[eirslett]

Try with Storybook version 6.3.0-alpha.10 or later?

[mrmartineau]

@eirslett thanks for that, upgrading to 6.3.0-alpha.10 did allow me to successfully view my Storybook, but a few addons needed to be disabled in order for it to work.

I can confirm that, import.meta.env environment variables do not break the build anymore and their values are being passed through.

Info on other errors

I know that it is not your job to fix these, but I thought I would at least document them here so that they are, at the very least, captured.

ℹ️ These errors were shown in the browser console, not the Terminal

The plugins I had to disable are:

• storybook-addon-paddings @rbardini
• @storybook/addon-a11y @shilman

storybook-addon-paddings error

Uncaught ReferenceError: exports is not defined at defaultParameters.js:3

Here a snippet of the offending source code:

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.parameters = void 0;

@storybook/addon-a11y error

a11yRunner.js:10 Uncaught SyntaxError: The requested module '/@fs/Users/zander/code/my/project/node_modules/@storybook/addon-a11y/node_modules/axe-core/axe.js?v=ad04bc2d' does not provide an export named 'default'

[eirslett]

@mrmartineau if you clone this plugin, you could try addint the plugins to the example. There is a file in this project that is called optimizeDeps.js where you can add dependencies that aren't ESM-native: https://github.com/eirslett/storybook-builder-vite/blob/main/packages/storybook-builder-vite/optimizeDeps.js for addon-a11y it looks like we need to add axe-core to the list.

[mrmartineau]

ok, I will give it a go. How do I use a local version of this plugin? yarn link?

By the way, I am also experiencing issues with Theme-UI. One could assume that package with a ThemeProvider would also not work.

[eirslett]

In this repo, just run npm install. Using npm 7 or later. Make sure that it doesn't inadvertently install any module inside individual packages' node_modules folder, it should all be installed in the root folder. (The packages in this project may have their own node_modules folder, but it should only be used for cache stuff, not for actual modules)

[mrmartineau]

ok, i have installed packages locally and yarn linked them to my project. I now have more errors than I did before. I will investigate further and come back to you with some thoughts.

[mrmartineau]

This experiment did not work. I added the items below to the optimizeDeps.js file and had some other errors.

        'theme-ui',
        'storybook-addon-paddings',
        '@storybook/addon-a11y',
        'axe-core',

I can't spend all day on this so I will revisit when I am not under so much pressure to deliver new work. Thanks for the Vite builder btw 😄

[rbardini]

@mrmartineau I've just released Storybook Paddings Addon v4.1.0 with ESM support. Feel free to give it a try and open an issue if it's still breaking 😉