[Bug]: Uncaught TypeError: Refresh.isLikelyComponentType is not a function

[CaptainN]

Describe the bug

Storybook won't load any stories - I get this runtime error:

Uncaught TypeError: Refresh.isLikelyComponentType is not a function
    at registerExportsForReactRefresh (RefreshUtils.js:157:1)
    at Object.executeRuntime (RefreshUtils.js:205:1)
    at $ReactRefreshModuleRuntime$ (index.ts:6:1)
    at ./src/util/index.ts (index.ts:6:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at ./node_modules/console-browserify/index.js (index.js:2:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)

To Reproduce

I'm really not sure, but here are my configs:

.storybook/main.js:

const path = require("path");

/** @type { import('@storybook/nextjs').StorybookConfig } */
module.exports = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  staticDirs: ["../public"],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve("../web/src"),
    ];
    return config;
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
};

preview-head.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<style>
:root {
  --font-roboto: "Roboto";
}
</style>

import { themes } from "@storybook/theming";

import "styles/main.scss";

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    // actions: { argTypesRegex: "^on[A-Z].*" },
    backgrounds: {
      default: "light",
    },
    darkMode: {
      dark: { ...themes.dark, appBg: "black" },
      light: { ...themes.normal, appBg: "red" },
    },
  },
};

export default preview;

System

Storybook Environment Info:

  System:
    OS: macOS 14.4
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm <----- active
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 123.0.6312.123
    Edge: 123.0.2420.81
    Safari: 17.4
  npmPackages:
    @storybook/addon-essentials: ^8.0.8 => 8.0.8 
    @storybook/addon-interactions: ^8.0.8 => 8.0.8 
    @storybook/addon-links: ^8.0.8 => 8.0.8 
    @storybook/addon-onboarding: ^8.0.8 => 8.0.8 
    @storybook/blocks: ^8.0.8 => 8.0.8 
    @storybook/nextjs: ^8.0.8 => 8.0.8 
    @storybook/react: ^8.0.8 => 8.0.8 
    @storybook/test: ^8.0.8 => 8.0.8 
    storybook: ^8.0.8 => 8.0.8

Additional context

No response

[CaptainN]

If I run a storybook build, then run that - I get this error:

Cannot read properties of undefined (reading 'custom')
TypeError: Cannot read properties of undefined (reading 'custom')
    at ./node_modules/assert/build/internal/assert/assertion_error.js (http://127.0.0.1:8080/5943.94865f7a.iframe.bundle.js:404:191427)
    at __webpack_require__ (http://127.0.0.1:8080/runtime~main.628485a3.iframe.bundle.js:1:381)
    at ./node_modules/assert/build/assert.js (http://127.0.0.1:8080/5943.94865f7a.iframe.bundle.js:404:165662)
    at __webpack_require__ (http://127.0.0.1:8080/runtime~main.628485a3.iframe.bundle.js:1:381)
    at ./node_modules/console-browserify/index.js (http://127.0.0.1:8080/5943.94865f7a.iframe.bundle.js:404:252160)
    at __webpack_require__ (http://127.0.0.1:8080/runtime~main.628485a3.iframe.bundle.js:1:381)
    at ./node_modules/next/dist/compiled/react-dom/index.js (http://127.0.0.1:8080/5943.94865f7a.iframe.bundle.js:404:688784)
    at __webpack_require__ (http://127.0.0.1:8080/runtime~main.628485a3.iframe.bundle.js:1:381)
    at ./node_modules/next/dist/compiled/react-dom/client.js (http://127.0.0.1:8080/5943.94865f7a.iframe.bundle.js:404:688505)
    at __webpack_require__ (http://127.0.0.1:8080/runtime~main.628485a3.iframe.bundle.js:1:381)

If I follow the workaround in #21911 it doesn't help with dev mode, but does seem to get unbroken stories to load after build:

    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...config.resolve.alias,
      // Mock assert to avoid issues like Cannot read properties of undefined (reading 'custom')
      assert: require.resolve('browser-assert'),
    };

Dev mode still doesn't work though.

[valentinpalkovic]

Hi @CaptainN

Can you provide a reproduction? https://storybook.new

[CaptainN]

Weird, it was just the presence of this file in my source tree:

src/util/index.ts:

export function withGlobalProps(pageProps) {
  return {
    globalProps: {},
    ...pageProps,
  };
}

It wasn't even being imported by anything

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