[Bug]: Storybook dev react-refresh wrappers applied twice

[danyim]

Describe the bug

Running Storybook in dev mode with HMR appears to break when refreshing with a ?path=... URL param but not when navigating to root URL (i.e. http://localhost:6006). This appears to be because react-refresh wrappers are added twice when rendering a story with a URL param.

This is occurring in Storybook v7.5.3 built using with @vitejs/plugin-react-swc.

Error (in Chrome console):

Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared (at withRoot.jsx:9:1)

Code:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/withRoot.jsx");import * as RefreshRuntime from "/@react-refresh";

if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
const prevRefreshReg = window.$RefreshReg$;
const prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = RefreshRuntime.getRefreshReg("/Users/danyim/Dev/services-frontend/frontend/src/withRoot.jsx");
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

import * as RefreshRuntime from "/@react-refresh";
if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
const prevRefreshReg = window.$RefreshReg$;
const prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = RefreshRuntime.getRefreshReg("/Users/danyim/Dev/services-frontend/frontend/src/withRoot.jsx");
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
//   

.storybook/main.js config:

import path, { dirname, join } from 'path';
import { mergeConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

const config = {
  framework: '@storybook/react-vite',
  stories: ['../src/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  staticDirs: ['../public'],

  features: {
    storyStoreV7: false,
  },

  typescript: {
    reactDocgen: false,
  },

  docs: {
    autodocs: true,
  },

  async viteFinal(config) {
    // Remove vite-plugin-pwa
    config.plugins = [
      react({
        plugins: [['@swc/plugin-styled-components', {}]],
      }),
      ...config.plugins.filter((plugin) => plugin.name !== 'vite-plugin-pwa'),
    ];
    return mergeConfig(config, {
      server: {
        watch: {
          ignored: ['**/.env.*'],
        },
      },
      define: { ...config.define, global: {} },
    });
  },
};

export default config;

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 4.0.2 - ~/.nvm/versions/node/v18.18.2/bin/yarn <----- active
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 17.0
  npmPackages:
    @storybook/addon-actions: ^7.5.3 => 7.5.3
    @storybook/addon-essentials: ^7.5.3 => 7.5.3
    @storybook/addon-storyshots: ^7.5.3 => 7.5.3
    @storybook/node-logger: ^7.5.3 => 7.5.3
    @storybook/react-vite: ^7.5.3 => 7.5.3
    @storybook/testing-library: ^0.2.2 => 0.2.2
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    msw-storybook-addon: ^1.10.0 => 1.10.0
    storybook: ^7.5.3 => 7.5.3

Additional context

"@storybook/addon-actions": "^7.5.3",
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-storyshots": "^7.5.3",
"@storybook/node-logger": "^7.5.3",
"@storybook/react-vite": "^7.5.3",
"@storybook/testing-library": "^0.2.2",
"@swc/plugin-styled-components": "^1.5.56",
"@vitejs/plugin-react-swc": "^3.2.0",
"flow-bin": "0.199.1",
"msw-storybook-addon": "^1.10.0",
"storybook": "^7.5.3",
"vite": "^5.0.0",
"vite-plugin-html": "^3.2.0",
"vite-plugin-pwa": "^0.16.7",
"vite-plugin-static-copy": "^0.9.0",
"vite-plugin-svgr": "^2.2.1",

[valentinpalkovic]

I assume, that you have configured @vitejs/plugin-react-swc inside Storybook's main.<ts|js> configuration in the viteFinal config?

Can you rather set the plugin in your vite.config.js file?

[danyim]

I'll close this issue as we were able to resolve it by letting Storybook inherit our Vite settings without specifying a viteFinal. Thank you for the response, @valentinpalkovic!