After storybook init, it cannot load any of the generated .tsx examples: ReferenceError: $RefreshReg$ is not defined

[jeremytowne]

They all fail to load with this error:

Unexpected error while loading ./stories/Button.stories.tsx: $RefreshReg$ is not defined
 ReferenceError: $RefreshReg$ is not defined
    at ./src/stories/Button.tsx (http://localhost:6006/main.iframe.bundle.js:703:1)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
    at ./src/stories/Button.stories.tsx (http://localhost:6006/main.iframe.bundle.js:212:65)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
    at webpackContext (http://localhost:6006/main.iframe.bundle.js:1390:9)
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-2d1eff.iframe.bundle.js:28754:29
    at Array.forEach (<anonymous>)
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-2d1eff.iframe.bundle.js:28752:18

This is using the default out of the box config generated by npx storybook init, so my main.js is still using webpack5

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

[ndelangen]

This seems like some bad config/setup to me. Can you supply a reproduction?

Does this issue still exist? Can you try the latest 7.0 beta?

[mgenov]

Getting the same error with 7.1.0

[ndelangen]

Can you supply a reproduction?

These links may help: https://stackoverflow.com/questions/66472945/referenceerror-refreshreg-is-not-defined https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176

[mgenov]

Yes, I found the solution in the second link.

Setting explicit fastRefresh: true worker for me.

reactOptions: {
    fastRefresh: true,
},

Thanks for your feedback.

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions[bot]]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[ereminnf]

The solution with reactOptions above didn't work for me. I adjusted the babel config specifically for the storybook, removed the 'react-refresh/babel' plugin and now everything is working.

p.s. I use babel config via babel parameter in .storybook/main.js

[doctap]

It helped for me

reactOptions: { fastRefresh: true, },

https://storybook.js.org/docs/6.4/react/faq#how-do-i-setup-react-fast-refresh-with-storybook

[valentinpalkovic]

@doctap Can you provide a reproduction? The error shouldn't occur. Of course fast-refresh option might fix it but I am curious what's causing the error.