[Bug] The symbol "prevRefreshReg" has already been declared

What version of vite are you using?

3.2.2

System info and storybook versions

Environment Info:

System: OS: macOS 12.6 CPU: (10) arm64 Apple M1 Max Binaries: Node: 18.11.0 - /opt/homebrew/bin/node npm: 8.19.2 - /opt/homebrew/bin/npm Browsers: Chrome: 107.0.5304.87 Safari: 16.0 npmPackages: @storybook/addon-actions: ^6.5.13 => 6.5.13 @storybook/addon-backgrounds: ^6.5.13 => 6.5.13 @storybook/addon-controls: ^6.5.13 => 6.5.13 @storybook/addon-links: ^6.5.13 => 6.5.13 @storybook/addon-toolbars: ^6.5.13 => 6.5.13 @storybook/addon-viewport: ^6.5.13 => 6.5.13 @storybook/addons: ^6.5.13 => 6.5.13 @storybook/builder-vite: ^0.2.5 => 0.2.5 @storybook/cli: ^6.5.13 => 6.5.13 @storybook/client-api: ^6.5.13 => 6.5.13 @storybook/preset-typescript: ^3.0.0 => 3.0.0 @storybook/react: ^6.5.13 => 6.5.13

Describe the Bug

We are trying to switch to storybook-builder-vite and encountered the following issue:

 The symbol "prevRefreshSig" has already been declared
  1  |  import RefreshRuntime from "/@react-refresh";let prevRefreshReg;let prevRefreshSig;if (import.meta.hot) {  if (!window.__vite_plugin_react_preamble_installed__) {    throw new Error(      "@vitejs/plugin-react can't detect preamble. Something is wrong. " +      "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"    );  }  prevRefreshReg = window.$RefreshReg$;  prevRefreshSig = window.$RefreshSig$;  window.$RefreshReg$ = (type, id) => {    RefreshRuntime.register(type, "Sites/frontend-portal/src/src/organisms/RegistrationUserDataForm/RegistrationUserDataForm.story.tsx" + " " + id)  };  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;}import RefreshRuntime from "/@react-refresh";
  2  |  let prevRefreshReg;
  3  |  let prevRefreshSig;

This error occurs multiple times for each file.

main.js:

const path = require("path");
const { readdirSync } = require("fs");
const { mergeConfig } = require("vite");
const react = require("@vitejs/plugin-react");

const absolutePathAliases = {};
const srcPath = path.resolve("./../src/src/");
const srcRootContent = readdirSync(srcPath, { withFileTypes: true }).map(
    (directoy) => directoy.name.replace(/(\.ts){1}(x?)/, "")
);

srcRootContent.forEach((directory) => {
    absolutePathAliases[directory] = path.join(srcPath, directory);
});

module.exports = {
    core: {
        builder: "@storybook/builder-vite",
    },
    stories: ["../src/**/*.story.tsx"],
    addons: [
        "@storybook/addon-toolbars",
        "@storybook/addon-actions",
        "@storybook/addon-links",
        "@storybook/addon-viewport",
        "@storybook/addon-controls",
        "@storybook/addon-backgrounds",
    ],
    async viteFinal(config) {
        // Merge custom configuration into the default config
        return mergeConfig(config, {
            // Use the same "resolve" configuration as your app
            resolve: {
                alias: {
                    ...absolutePathAliases,
                },
            },
            plugins: [
                react({
                    babel: {
                        parserOpts: {
                            plugins: ["decorators-legacy", "classProperties"],
                        },
                    },
                }),
            ],
        });
    },
};

Got no idea, what is missing right now.

Link to Minimal Reproducible Example

No response

Participation

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

[IanVS]

Unfortunately that’s one of the top issues with vite right now. See https://github.com/vitejs/vite/issues/2433 for some tips and workarounds to deal with it.

[vertic4l]

@IanVS Thanks for the tip, just tried out storybook 7.0 alpha version… Everything is fine now. And it’s so fucking fast. Awesome!