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

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

[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 😉

[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 😄