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

[vertic4l]

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]

You have multiple react plugins. You've got two options:

1. Try out the latest storybook 7.0 alpha version, which uses your config from vite.config.js so you don't have to define it twice.
2. Filter out the react plugin in your viteFinal before adding in your own. (see Babel configuration #286 (comment) for an example).

If you want to try option 1 (I'd recommend at least giving it a shot, it's much faster than 6.5 as well), you can run npx sb@next upgrade --prerelease to upgrade packages and take care of a few migrations for you.

[vertic4l]

@IanVS Thanks, it's indeed all about that react plugin which produces that issue.

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

[vertic4l]

Just one thing that now came up is our bitbucket pipeline:
Reached heap limit Allocation failed - JavaScript heap out of memory :(

[IanVS]

Unfortunately that's one of the top issues with vite right now. See vitejs/vite#2433 for some tips and workarounds to deal with it.

[samuelmburu]

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

Thanks @IanVS removing the react plugin from my vite config fixed the issue for me