builder-vite [Bug] 504's and "error loading dynamically imported module"

What version of `vite` are you using?

2.9.14

System info and storybook versions

Environment Info:

  System:
    OS: macOS 11.6.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 102.0.1
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9
    @storybook/addon-essentials: ^6.5.9 => 6.5.9
    @storybook/addon-interactions: ^6.5.9 => 6.5.9
    @storybook/addon-links: ^6.5.9 => 6.5.9
    @storybook/addons: ^6.5.9 => 6.5.9
    @storybook/api: ^6.5.9 => 6.5.9
    @storybook/builder-vite: ^0.1.39 => 0.1.39
    @storybook/components: ^6.5.9 => 6.5.9
    @storybook/core-common: ^6.5.9 => 6.5.9
    @storybook/core-events: ^6.5.9 => 6.5.9
    @storybook/node-logger: ^6.5.9 => 6.5.9
    @storybook/react: ^6.5.9 => 6.5.9
    @storybook/source-loader: ^6.5.9 => 6.5.9
    @storybook/testing-library: ^0.0.13 => 0.0.13
    @storybook/theming: ^6.5.9 => 6.5.9

Storybook Addons:

'@storybook/addon-actions', 
'@storybook/addon-links', 
'@storybook/addon-essentials', 
'storybook-formik/register', 
'storybook-react-i18next'

Describe the Bug

We use Storybook + Chromatic.

We have swapped from Webpack 5 builer to Vite as we swapped from CRA to Vite for the app itself.

Chromatic seems to work most of the time but locally we just hit:

In the browser console we see this:

11:20:35.221 InstallTrigger is deprecated and will be removed in the future. vendors~main.manager.bundle.js:54906:46
11:20:35.280 Source map error: Error: request failed with status 404
Resource URL: http://localhost:6006/vendors~main.manager.bundle.js
Source Map URL: index.js.map
11:20:35.528 Source map error: Error: request failed with status 404
Resource URL: http://localhost:6006/vendors~main.manager.bundle.js
Source Map URL: index.js.map
11:20:36.279 [vite] connecting... client.ts:16:8
11:20:36.644 [vite] connected. client.ts:53:14
11:20:37.253 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/@mui_material_styles.js?v=bbbdc6d4
[HTTP/1.1 504 Gateway Timeout 7ms]

11:20:37.254 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/@mui_x-license-pro.js?v=afc4cacb
[HTTP/1.1 504 Gateway Timeout 5ms]

11:20:37.254 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/@storybook_addons.js?v=bbbdc6d4
[HTTP/1.1 504 Gateway Timeout 7ms]

11:20:37.255 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/mockdate.js?v=c03e7816
[HTTP/1.1 504 Gateway Timeout 6ms]

11:20:37.257 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/react_jsx-dev-runtime.js?v=bbbdc6d4
[HTTP/1.1 504 Gateway Timeout 6ms]

11:20:37.309 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_material_styles.js?v=bbbdc6d4” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.310 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_addons.js?v=bbbdc6d4” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.312 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_x-license-pro.js?v=afc4cacb” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.313 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/mockdate.js?v=c03e7816” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.314 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/react_jsx-dev-runtime.js?v=bbbdc6d4” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.324 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_material_styles.js?v=bbbdc6d4”. iframe.html:492:1
11:20:37.324 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_addons.js?v=bbbdc6d4”. iframe.html:492:1
11:20:37.324 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_x-license-pro.js?v=afc4cacb”. iframe.html:492:1
11:20:37.324 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/mockdate.js?v=c03e7816”. iframe.html:492:1
11:20:37.327 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/react_jsx-dev-runtime.js?v=bbbdc6d4”. iframe.html:492:1
11:20:37.329 Error reading preview.js: index.js:56:66
    error index.js:56
    renderPreviewEntryError Preview.js:730
    renderPreviewEntryError PreviewWeb.js:816
    getProjectAnnotationsOrRenderError Preview.js:134
    _runRejections index.js:194
    _runRejections index.js:191
    _setRejected index.js:275
    _failWith index.js:177
    _runRejections index.js:200
    _runRejections index.js:191
    _setRejected index.js:275
    _failWith index.js:177
    _chainPromiseData index.js:263
    (Async: promise callback)
    _chainPromiseData index.js:262
    _handleUserFunctionResult index.js:254
    _runResolutions index.js:218
    _runResolutions index.js:214
    then index.js:67
    getProjectAnnotationsOrRenderError Preview.js:123
    initialize Preview.js:102
    <anonymous> vite-app.js:25
11:20:37.329 TypeError: error loading dynamically imported module index.js:56:66
    error index.js:56
    renderPreviewEntryError Preview.js:731
    renderPreviewEntryError PreviewWeb.js:816
    getProjectAnnotationsOrRenderError Preview.js:134
    _runRejections index.js:194
    _runRejections index.js:191
    _setRejected index.js:275
    _failWith index.js:177
    _runRejections index.js:200
    _runRejections index.js:191
    _setRejected index.js:275
    _failWith index.js:177
    _chainPromiseData index.js:263
    (Async: promise callback)
    _chainPromiseData index.js:262
    _handleUserFunctionResult index.js:254
    _runResolutions index.js:218
    _runResolutions index.js:214
    then index.js:67
    getProjectAnnotationsOrRenderError Preview.js:123
    initialize Preview.js:102
    <anonymous> vite-app.js:25
11:20:37.596 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/i18next.js?v=221a74f4”. iframe.html:492:1
11:20:37.596 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/react-i18next.js?v=221a74f4”. iframe.html:492:1
11:20:37.596 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/i18next-browser-languagedetector.js?v=221a74f4”. iframe.html:492:1
11:20:37.598 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/i18next-http-backend.js?v=221a74f4”. iframe.html:492:1
11:20:37.599 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/react.js?v=221a74f4”. iframe.html:492:1
11:20:37.599 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/react_jsx-dev-runtime.js?v=221a74f4”. iframe.html:492:1
11:20:37.599 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_material.js?v=221a74f4”. iframe.html:492:1

and Storybook just shows error loading dynamically imported module

main.js

const path = require('path');
const { mergeConfig } = require('vite');

module.exports = {
  staticDirs: ['../public'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-essentials', 'storybook-formik/register', 'storybook-react-i18next'],
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-vite',
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [],
      server: {
        hmr: {},
      },
      build: {
        chunkSizeWarningLimit: 50000,
      },
      base: '/',
      css: {
        preprocessorOptions: {
          scss: { additionalData: `@import "./src/index.scss";` },
        },
      },
      resolve: {
        alias: {
          '@emotion/core': path.resolve(__dirname, '../node_modules/@emotion/react'),
          'emotion-theming': path.resolve(__dirname, '../node_modules/@emotion/react'),
          '@': path.resolve(__dirname, '../src'),
        },
      },
    });
  },
};

preview.jsx

// fonts
import '@fontsource/lato/300.css';
import '@fontsource/lato/400.css';
import '@fontsource/raleway/200.css';
import '@fontsource/roboto/400.css';
// other
import { ThemeProvider } from '@mui/material/styles';
import { makeDecorator } from '@storybook/addons';
import { LicenseInfo } from '@mui/x-license-pro';
import MockDate from 'mockdate';
import buildTheme from '../src/theme';
import i18n from './i18next.js';
import { withI18Next } from './withi18next';

LicenseInfo.setLicenseKey('<redacted>');

const lightTheme = buildTheme('light');
const darkTheme = buildTheme('dark');

const withThemeProvider = (Story, context) => {
  return (
    <ThemeProvider theme={lightTheme}>
      <Story {...context} />   
    </ThemeProvider>
  );
};

const fakeDateDecorator = makeDecorator({
  name: 'withDate',
  parameterName: 'date',
  wrapper: (storyFn, context, { parameters: date }) => {
    MockDate.reset();
    if (date instanceof Date) {
      MockDate.set(date);
    }
    return storyFn(context);
  },
});
export const decorators = [withThemeProvider, withI18Next, fakeDateDecorator];

export const parameters = {
  i18n,
  locale: 'en',
  locales: {
    en: 'English (US)',
    'en-GB': 'English (UK)',
    fr: 'Français',
    de: 'Deutsch',
  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Link to Minimal Reproducible Example

No response

Participation

[ ] I am willing to submit a pull request for this issue.

Jul 13 '22 10:07 philjones88

It looks like something in the manager is breaking. Do you know if anything you're using depends on having webpack 5? The vite builder uses webpack 4 to build the manager, so maybe when you converted over, something started to break. Do you have a .storybook/manager.js file?

Jul 13 '22 12:07 IanVS

@IanVS thanks for the reply. We used to use webpack 5 for storybook. searching our yarn.lock file I can:

"@storybook/[email protected]" "webpack@4": "webpack@>=4.43.0 <6.0.0":

we have no hard webpack entry in our package.json file.

No. We don't have a manager.js file.

Jul 13 '22 12:07 philjones88

Maybe you can tey removing imports from your privew.jsx file one at a time and find which one is causing the error?

Jul 13 '22 12:07 IanVS

Oh, also did you remove your node_modules and install fresh? Or at least remove the node_modules/.cache

Jul 13 '22 12:07 IanVS

It does seem to be intermitent, almost like it's a caching issue, when it has been happening, removing node_modules doesn't seem to fix it. there might be a cache elsewhere?

Jul 13 '22 12:07 philjones88

Not other than the browser cache. Have you tried in an incognito window, just as a shot in the dark?

I'd also suggest removing this from your config, in case it's removing parts of the config that the vite builder is adding (though I think mergeConfig is smart enough not to:

      plugins: [],
      server: {
        hmr: {},
      },

Finally, the only other thing I can think to suggest is to start simplifying the config step by step. Maybe try removing addons like storybook-formik/register for instance, and see if that makes a difference. You can run storybook with --no-manager-cache to be sure the webpack cache is cleared before each run, though it should clear on its own when you change config files.

Jul 13 '22 13:07 IanVS

Hmm. Hit it today after upgrading to Vite 3.0.0 and the 0.2.0 of this lib.So node_modules would have changed I guess as I updated packages.

Cancelled Storybook, added --no-manager-cache so yarn storybook --no-manager-cache and it then works.

Seems to solve it...

Jul 14 '22 09:07 philjones88

I'm having the exact same issue. Usually happens when I run it for the first time after a while. And when I run storybook again, it works as it should. Tried

Hmm. Hit it today after upgrading to Vite 3.0.0 and the 0.2.0 of this lib.So node_modules would have changed I guess as I updated packages.

Cancelled Storybook, added --no-manager-cache so yarn storybook --no-manager-cache and it then works.

Seems to solve it...

But still the error happens.

Jul 25 '22 21:07 nagisaando

This seems to occasionally happen when vite hasn't pre-bundled its dependencies. It was better for a while when using 2.9, but it seems to be an issue again in 3.0. @nagisaando @philjones88 when you see this happen, do you also see messages in the terminal about vite finding and optimizing dependencies? If so, you can try adding those to optimizeDeps.include in your config in viteFinal. For example:

const { mergeConfig } = require('vite');

module.exports = {
  //...
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      optimizeDeps: {
        include: [
          '@storybook/addon-a11y/preview.js',
          '@storybook/addon-actions/preview.js',
          '@storybook/addon-backgrounds/preview.js',
          'babel-plugin-open-source/script.js',
          'chromatic/isChromatic',
          'storybook-dark-mode',
        ],
      },
    });
  },
};

Jul 25 '22 22:07 IanVS

It has just happened again to me, the full log of running it:

➜  yarn storybook
yarn run v1.22.18
$ start-storybook -p 6006
info @storybook/react v6.5.9
info
info => Loading presets
info Found existing addon "@storybook/addon-actions", skipping.
info => Serving static files from ././public at /

info => Ignoring cached manager due to change in manager config
ℹ ｢wdm｣: wait until bundle finished:
ℹ ｢wdm｣: Hash: 9c4937db33d68ebb42cf
Version: webpack 4.46.0
Time: 6895ms
Built at: 07/26/2022 9:45:00 AM
                         Asset      Size        Chunks                    Chunk Names
           0.manager.bundle.js   224 KiB             0  [emitted]
           1.manager.bundle.js   128 KiB             1  [emitted]
           2.manager.bundle.js   891 KiB             2  [emitted]  [big]
           3.manager.bundle.js  83.9 KiB             3  [emitted]
           4.manager.bundle.js  15.8 KiB             4  [emitted]
           5.manager.bundle.js   295 KiB             5  [emitted]  [big]
           6.manager.bundle.js  1.36 KiB             6  [emitted]
                    index.html  4.01 KiB                [emitted]
        main.manager.bundle.js  4.88 KiB          main  [emitted]         main
runtime~main.manager.bundle.js  8.95 KiB  runtime~main  [emitted]         runtime~main
vendors~main.manager.bundle.js  4.82 MiB  vendors~main  [emitted]  [big]  vendors~main
Entrypoint main [big] = runtime~main.manager.bundle.js vendors~main.manager.bundle.js main.manager.bundle.js
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-actions/manager.js ./node_modules/@storybook/addon-links/manager.js ./node_modules/@storybook/addon-docs/manager.js ./node_modules/@storybook/addon-controls/manager.js ./node_modules/@storybook/addon-backgrounds/manager.js ./node_modules/@storybook/addon-viewport/manager.js ./node_modules/@storybook/addon-toolbars/manager.js ./node_modules/@storybook/addon-measure/manager.js ./node_modules/@storybook/addon-outline/manager.js ./node_modules/storybook-formik/register.js ./node_modules/storybook-i18n/manager.js 172 bytes {main} [built]
[./node_modules/@storybook/addon-actions/manager.js] ./node_modules/@storybook/addon-actions/manager.js + 16 modules 222 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-actions/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/manager.js 3.42 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/containers/ActionLogger/index.js 7.4 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/index.js 2.97 KiB [built]
    | ./node_modules/react-inspector/dist/es/react-inspector.js 81.7 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/style.js 793 bytes [built]
    | ./node_modules/polished/dist/polished.esm.js 122 KiB [built]
    | ./node_modules/@babel/runtime/helpers/esm/extends.js 418 bytes [built]
    | ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js 192 bytes [built]
    | ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js 259 bytes [built]
    | ./node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js 1.06 KiB [built]
    | ./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteralLoose.js 155 bytes [built]
    | ./node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js 229 bytes [built]
    | ./node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js 237 bytes [built]
    | ./node_modules/@babel/runtime/helpers/esm/isNativeFunction.js 118 bytes [built]
    |     + 2 hidden modules
[./node_modules/@storybook/addon-backgrounds/manager.js] ./node_modules/@storybook/addon-backgrounds/manager.js + 6 modules 15.2 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-backgrounds/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/manager.js 826 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/constants.js 185 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/BackgroundSelector.js 6.55 KiB [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/GridSelector.js 3.51 KiB [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/components/ColorIcon.js 399 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/helpers/index.js 3.57 KiB [built]
[./node_modules/@storybook/addon-controls/manager.js] ./node_modules/@storybook/addon-controls/manager.js + 3 modules 6 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-controls/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/manager.js 1.23 KiB [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/constants.js 74 bytes [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js 4.57 KiB [built]
[./node_modules/@storybook/addon-docs/manager.js] ./node_modules/@storybook/addon-docs/manager.js + 2 modules 1.02 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-docs/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-docs/dist/esm/manager.js 625 bytes [built]
    | ./node_modules/@storybook/addon-docs/dist/esm/shared.js 380 bytes [built]
[./node_modules/@storybook/addon-links/manager.js] ./node_modules/@storybook/addon-links/manager.js + 2 modules 662 bytes {vendors~main} [built]
    | ./node_modules/@storybook/addon-links/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-links/dist/esm/manager.js 398 bytes [built]
    | ./node_modules/@storybook/addon-links/dist/esm/constants.js 225 bytes [built]
[./node_modules/@storybook/addon-measure/manager.js] ./node_modules/@storybook/addon-measure/manager.js + 3 modules 3.99 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-measure/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/manager.js 484 bytes [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/constants.js 290 bytes [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/Tool.js 3.12 KiB [built]
[./node_modules/@storybook/addon-outline/manager.js] ./node_modules/@storybook/addon-outline/manager.js + 3 modules 4.15 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-outline/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-outline/dist/esm/manager.js 626 bytes [built]
    | ./node_modules/@storybook/addon-outline/dist/esm/constants.js 76 bytes [built]
    | ./node_modules/@storybook/addon-outline/dist/esm/OutlineSelector.js 3.35 KiB [built]
[./node_modules/@storybook/addon-toolbars/manager.js] ./node_modules/@storybook/addon-toolbars/manager.js + 11 modules 19 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-toolbars/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/manager.js 467 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/constants.js 76 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarManager.js 1.44 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuList.js 4.99 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/normalize-toolbar-arg-type.js 1.05 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuButton.js 625 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/hoc/withKeyboardCycle.js 5.09 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/get-selected.js 1000 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuListItem.js 979 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/create-cycle-value-array.js 573 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js 2.69 KiB [built]
[./node_modules/@storybook/addon-viewport/manager.js] ./node_modules/@storybook/addon-viewport/manager.js + 5 modules 18.8 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-viewport/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/manager.js 514 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/constants.js 316 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/Tool.js 11 KiB [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/shortcuts.js 3.81 KiB [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/defaults.js 2.98 KiB [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/manager/index.js] ./node_modules/@storybook/core-client/dist/esm/manager/index.js + 4 modules 22.9 KiB {vendors~main} [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/index.js 335 bytes [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/provider.js 5.17 KiB [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/conditional-polyfills.js 762 bytes [built]
    | ./node_modules/@storybook/channel-postmessage/dist/esm/index.js 13.2 KiB [built]
    | ./node_modules/@storybook/channel-websocket/dist/esm/index.js 3.26 KiB [built]
[./node_modules/@storybook/ui/dist/esm/index.js] 498 KiB {vendors~main} [built]
[./node_modules/storybook-formik/register.js] 32 bytes {vendors~main} [built]
[./node_modules/storybook-i18n/manager.js] 55 bytes {vendors~main} [built]
    + 981 hidden modules
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.31 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.
╭────────────────────────────────────────────────╮
│                                                │
│   Storybook 6.5.9 for React started            │
│   23 s for manager and 19 s for preview        │
│                                                │
│    Local:            http://localhost:6006/    │
│    On your network:  http://10.0.0.75:6006/    │
│                                                │
╰────────────────────────────────────────────────╯
9:45:20 AM [vite] ✨ new dependencies optimized: @mui/x-license-pro, mockdate, i18next-browser-languagedetector, i18next-http-backend
9:45:20 AM [vite] ✨ optimized dependencies changed. reloading

That optimized dependencies changed, reloading is the last line it ever prints

Jul 26 '22 08:07 philjones88

@philjones88 try adding those deps to your optimizeDeps.include. That should help avoid this error.

Jul 26 '22 12:07 IanVS

@IanVS Hey thanks! I added dependencies to optimizeDeps.include and it's working so far. My project uses vite 2.9.9 so the issue may be occurring in the both versions.

Jul 26 '22 15:07 nagisaando

I also encounter this issue every time the terminal says "new dependencies optimized"

Jul 27 '22 07:07 gabstafari

Me too! The issue occurred for the first time for me when upgrading from 0.1.39 to 0.2.2

Jul 29 '22 14:07 blowsie

The issue occurred for the first time for me when upgrading from 0.1.39 to 0.2.2

Did you also upgrade Vite? Vite has been changing the way that prebundling works through the last few versions, and it seems like maybe one of those changes is causing some problems for storybook.

@gabstafari @blowsie have you tried adding those dependencies to your optimizeDeps.include?

Jul 29 '22 14:07 IanVS

The issue occurred for the first time for me when upgrading from 0.1.39 to 0.2.2

Did you also upgrade Vite? Vite has been changing the way that prebundling works through the last few versions, and it seems like maybe one of those changes is causing some problems for storybook.

@gabstafari @blowsie have you tried adding those dependencies to your optimizeDeps.include?

Hi @IanVS it seems fine now.

I just made sure that I got all the packages I need so here are the list of packages I have to include.

"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-docs": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/addon-postcss": "3.0.0-alpha.1",
"@storybook/addons": "^6.5.9",
"@storybook/builder-vite": "^0.2.2",
"@storybook/testing-library": "^0.0.13",
"@storybook/theming": "^6.5.9",

I am still making more test and will let you know if I encountered any more issues.

Thanks for your hard work on this great storybook builder. :)

Jul 29 '22 16:07 gabstafari

Just to give an update on my issue, I ended up reverting back to storybook 6.4.22 and vite-builder to 0.1.33 The issues are gone.

Jul 30 '22 14:07 gabstafari

@gabstafari you were seeing this problem after adding to optimizeDeps.include?

Jul 30 '22 14:07 IanVS

@gabstafari you were seeing this problem after adding to optimizeDeps.include?

Hi @IanVS happy weekend!

No. I got error even before adding to optimizeDeps.include. I'm not sure why. Maybe because I made a wrong configuration.

Jul 30 '22 15:07 gabstafari

Experiencing the same. I've added all dependencies to the the optimizeDeps.include - same issue

Nov 04 '22 14:11 chuck-adaptive

@chuck-adaptive this can often indicate an error with your preview.js or some other problem with bundling your files. Do you see any error messages in the terminal where you started storybook? What versions of storybook and builder-vite are you using? If you're not seeing any other error messages, can you create a reproduction or share a link to your project if it is open source?

Nov 04 '22 14:11 IanVS

Unfortunately my project is no open source.

I see no other errors in my terminal. The build passes and the error triggers only when I select a story.

Downgrading my storybook & vite builder is showing me the same. I will try and create a repro and update you if I resolve it.

Nov 04 '22 14:11 chuck-adaptive

After adding optimizeDeps.include with all the dependencies in new dependencies optimized: it worked for me.

Nov 15 '22 14:11 tim-kilian

This seems to occasionally happen when vite hasn't pre-bundled its dependencies. It was better for a while when using 2.9, but it seems to be an issue again in 3.0. @nagisaando @philjones88 when you see this happen, do you also see messages in the terminal about vite finding and optimizing dependencies? If so, you can try adding those to optimizeDeps.include in your config in viteFinal. For example:
const { mergeConfig } = require('vite');

module.exports = {
  //...
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      optimizeDeps: {
        include: [
          '@storybook/addon-a11y/preview.js',
          '@storybook/addon-actions/preview.js',
          '@storybook/addon-backgrounds/preview.js',
          'babel-plugin-open-source/script.js',
          'chromatic/isChromatic',
          'storybook-dark-mode',
        ],
      },
    });
  },
};

Thank you so much, you saved me days of debugging.

I started facing this 504 error after cloning my Laravel inertia project to my new macbook ..... it's been very frustrating as i have no clue what could be the problem.

Nov 22 '22 18:11 edunwa302

For what it's worth, I ran into this issue and a simple rm -rf node_modules/ && yarn upgrade fixed it for me :)

Jun 12 '23 13:06 erwijet

For what it's worth, I ran into this issue and a simple rm -rf node_modules/ && yarn upgrade fixed it for me :)

Yep, fixed here too. Thanks!

Oct 11 '23 16:10 dsegovia90

builder-vite builder-vite copied to clipboard

[Bug] 504's and "error loading dynamically imported module"

What version of vite are you using?

System info and storybook versions

Describe the Bug

Link to Minimal Reproducible Example

Participation

builder-vite
builder-vite copied to clipboard

What version of `vite` are you using?