[Bug]: Error: Cannot read properties of null (reading 'useContext')

[Sun-Mountain]

Describe the bug

My stories were working until they weren't. I can't tell if it was an update or something else.

When I run pnpm build-storybook then pnpm storybook and I get the following error for all stories:

Error: Cannot read properties of null (reading 'useContext')
  at StyleRegistry (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:113778:30))
  at renderWithHooks (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:80677:18))
  at mountIndeterminateComponent (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:84441:13))
  at beginWork (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:85954:16))
  at beginWork$1 (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:91793:14))
  at performUnitOfWork (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90924:12))
  at workLoopSync (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90833:5))
  at renderRootSync (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90801:7))
  at recoverFromConcurrentError (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90217:20))

I get a slightly different error in firefox:

Error: can't access property "useContext", dispatcher is null
  at StyleRegistry (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:113778:30)
  at renderWithHooks (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:80677:27)
  at mountIndeterminateComponent (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:84441:13)
  at beginWork (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:85954:16)
  at beginWork$1 (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:91793:14)
  at performUnitOfWork (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90924:12)
  at workLoopSync (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90833:22)
  at renderRootSync (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90801:7)
  at recoverFromConcurrentError (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90217:34)
  at performConcurrentWorkOnRoot (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:90117:22)
  at workLoop (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:98567:42)
  at flushWork (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:98540:14)
  at performWorkUntilDeadline (/vendors-node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_asyncT-b9a701.iframe.bundle.js:98834:21)

The stack of my application:

NextJS, Prisma, Postgres, TypeScript

Package.json

{
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": ">=18.16.0",
    "pnpm": ">=8.6"
  },
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "install:all": "pnpm install && prisma generate && playwright install",
    "dev": "next dev -p 8080",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watch",
    "test:ci": "jest --ci --coverage --runInBand",
    "test:api": "playwright test playwright/api/* --project=\"Desktop Chrome\"",
    "test:e2e": "NEXTAUTH_URL=http://localhost:3001 playwright test --ui playwright/e2e/*.spec.ts",
    "test:e2e:ci": "NEXTAUTH_URL=http://localhost:3001 CI=true playwright test playwright/e2e/*.spec.ts --repeat-each 1 --retries 0 --timeout 0 --workers 1",
    "test:e2e:record": "playwright codegen http://localhost:8080",
    "test:server": "next dev -p 3001",
    "db:generate": "prisma generate",
    "db:migrate": "prisma migrate dev",
    "db:seed": "prisma db seed",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "prettier": "prettier . --write --ignore-path=.prettierignore"
  },
  "dependencies": {
    "@emotion/react": "11.11.1",
    "@emotion/server": "11.11.0",
    "@emotion/styled": "^11.11.0",
    "@headlessui/react": "1.7.16",
    "@headlessui/tailwindcss": "0.2.0",
    "@heroicons/react": "2.0.18",
    "@mui/material": "^5.14.5",
    "@prisma/client": "5.1.1",
    "@tailwindcss/typography": "0.5.9",
    "accesscontrol": "2.2.1",
    "autoprefixer": "10.4.14",
    "class-variance-authority": "0.7.0",
    "clsx": "2.0.0",
    "date-fns": "2.30.0",
    "next": "13.4.13",
    "next-auth": "4.22.5",
    "pino": "8.15.0",
    "pino-pretty": "10.2.0",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.4",
    "react-icons": "4.10.1",
    "tailwindcss": "3.3.3",
    "tsconfig-paths-webpack-plugin": "4.1.0",
    "tss-react": "4.8.8"
  },
  "devDependencies": {
    "@faker-js/faker": "8.0.2",
    "@playwright/test": "1.37.0",
    "@storybook/addon-actions": "7.3.2",
    "@storybook/addon-essentials": "7.3.2",
    "@storybook/addon-interactions": "7.3.2",
    "@storybook/addon-links": "7.3.2",
    "@storybook/addon-styling": "1.3.6",
    "@storybook/blocks": "7.3.2",
    "@storybook/nextjs": "7.3.2",
    "@storybook/react": "7.3.2",
    "@storybook/testing-library": "0.2.0",
    "@storybook/types": "7.3.2",
    "@testing-library/jest-dom": "5.17.0",
    "@testing-library/react": "14.0.0",
    "@testing-library/user-event": "14.4.3",
    "@types/jest": "29.5.3",
    "@types/node": "20.4.10",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "@types/testing-library__jest-dom": "5.14.9",
    "@typescript-eslint/eslint-plugin": "6.3.0",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.13",
    "eslint-config-prettier": "9.0.0",
    "eslint-plugin-jest-dom": "5.0.2",
    "eslint-plugin-storybook": "0.6.13",
    "eslint-plugin-testing-library": "5.11.1",
    "husky": "8.0.3",
    "jest": "29.6.2",
    "jest-environment-jsdom": "29.6.2",
    "lint-staged": "13.2.3",
    "msw": "1.2.3",
    "msw-storybook-addon": "1.8.0",
    "prettier": "3.0.1",
    "prettier-plugin-prisma": "5.0.0",
    "prettier-plugin-tailwindcss": "0.5.2",
    "prisma": "5.1.1",
    "storybook": "7.3.2",
    "ts-jest": "29.1.1",
    "ts-node": "10.9.1",
    "tsconfig-paths": "4.2.0",
    "typescript": "5.1.6",
    "whatwg-fetch": "3.6.17"
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  },
  "msw": {
    "workerDirectory": "public"
  },
  "prisma": {
    "seed": "pnpx ts-node -P tsconfig-seed.json -r tsconfig-paths/register --transpileOnly prisma/seed.ts"
  },
  "browser": {
    "[module-name]": false
  }
}

This is one of the stories that is failing:

import type { Meta, StoryObj } from '@storybook/react';
import { teamListPractice } from '@/lib/teamList';
import AutoComplete from '.';

const meta: Meta<typeof AutoComplete> = {
  title: 'UI/AutoComplete',
  component: AutoComplete,
  tags: ['autodocs'],
  argTypes: {
    options: { control: 'object' },
  },
};

export default meta;
type Story = StoryObj<typeof AutoComplete>;

export const Default: Story = {
  args: {
    options: teamListPractice,
  },
};

.storybook/decorator.tsx

import type { ReactRenderer } from '@storybook/react';
import type { PartialStoryFn as StoryFunction } from '@storybook/types';
import { AuthProvider } from '../src/components/AuthProvider';

export const withAuth = (Story: StoryFunction<ReactRenderer, {}>) => (
  <AuthProvider>
    <Story />
  </AuthProvider>
);

.storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const config: StorybookConfig = {
  stories: [
    '../src/(app|components)/**/*.mdx',
    '../src/(app|components)/**/*.stories.@(js|jsx|ts|tsx)',
    '../src/(app|components)/**/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  staticDirs: ['../public', '../src/assets/images'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'msw-storybook-addon',
    {
      name: '@storybook/addon-styling',
      options: {
        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
        // For more details on this addon's options.
        postCss: true,
      },
    },
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
  framework: {
    name: '@storybook/nextjs',
    options: {
      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
    },
  },
  docs: {
    autodocs: 'tag',
  },
  core: {
    disableTelemetry: true,
  },
  webpackFinal: async (config) => {
    if (config?.resolve) {
      config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx'];
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          configFile: path.resolve(__dirname, '../tsconfig.json'),
          extensions: config.resolve.extensions,
        }),
      ];
      return config;
    }
    return config;
  },
};
export default config;

.storybook/preview.ts

import type { Preview } from '@storybook/react';
import { initialize, mswLoader } from 'msw-storybook-addon';
import { handlers } from '../mocks/handlers';

import '../src/styles/globals.css';
import 'whatwg-fetch';

// Initialize MSW
initialize();

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    nextjs: {
      appDirectory: true,
    },
    msw: {
      handlers,
    },
  },
  // Provide the MSW addon decorator globally
  loaders: [mswLoader],
};

export default preview;

To Reproduce

No response

System

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 20.5.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Safari: 16.5.1
  npmPackages:
    @storybook/addon-actions: 7.3.2 => 7.3.2 
    @storybook/addon-essentials: 7.3.2 => 7.3.2 
    @storybook/addon-interactions: 7.3.2 => 7.3.2 
    @storybook/addon-links: 7.3.2 => 7.3.2 
    @storybook/addon-styling: 1.3.6 => 1.3.6 
    @storybook/blocks: 7.3.2 => 7.3.2 
    @storybook/nextjs: 7.3.2 => 7.3.2 
    @storybook/react: 7.3.2 => 7.3.2 
    @storybook/testing-library: 0.2.0 => 0.2.0 
    @storybook/types: 7.3.2 => 7.3.2 

### Additional context

I found [this issue](https://github.com/storybookjs/storybook/issues/21788) and I tried to delete MDX, but that didn't change anything.

I've repeatedly deleted node_modules, package-lock.json files and reinstalled.

I've uninstalled and reinstalled `pnpm`.

If anyone has any idea how to fix this I would greatly appreciate it.

[tanddeus]

I'm getting the same message in a brand new project, also with NextJS. Haven't even created any stories, the sample stories included with storybook won't even load. In my case, I am using npm. Dependencies from my package.json:

{  
  "dependencies": {  
    "@types/node": "20.5.3",  
    "@types/react": "18.2.21",  
    "@types/react-dom": "18.2.7",  
    "eslint": "8.47.0",  
    "eslint-config-next": "13.4.19",  
    "next": "13.4.19",  
    "react": "18.2.0",  
    "react-dom": "18.2.0",  
    "typescript": "5.1.6"  
  },  
  "devDependencies": {
    "@storybook/addon-essentials": "^7.3.2",
    "@storybook/addon-interactions": "^7.3.2",
    "@storybook/addon-links": "^7.3.2",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.3.2",
    "@storybook/nextjs": "^7.3.2",
    "@storybook/react": "^7.3.2",
    "@storybook/testing-library": "^0.2.0",
    "@testing-library/jest-dom": "^6.1.0",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.4",
    "eslint-plugin-storybook": "^0.6.13",
    "jest": "^29.6.3",
    "jest-environment-jsdom": "^29.6.3",
    "sass": "^1.66.1",
    "storybook": "^7.3.2"
  }
}

[Sun-Mountain]

@tanddeus what does your dependencies look like after you rollback?

[vietanhtran16]

I am getting the exact same error too. Has anyone managed to fix it?

[tanddeus]

@Sun-Mountain Sorry for the insanely slow response. Responding anyway now in case its still relevant. That's the strange part. I believe what I did was to uninstall all of the packages related to Storybook and then run:

npx storybook@7.1.0 init

At that point, I was no longer getting the error messages above. However, when I checked the package.json, version 7.3.2 of Storybook had still been installed. I'm new to working with Storybook, so maybe I didn't handle the rollback correctly somehow, but I hope this information is somehow helpful in getting to the bottom of this if no one already has