Cannot read properties of null (reading 'useState')

[tough chasm]

I'm getting an error while trying to open stories that has hooks in Storybook 7.0.2, this doesn't happen before in previous version and I didn't change any component codes.

I tried to repro this using sb repro but to no avail. I'm not sure what's going on and what's causing this error

I even tried migrating my project to use vite, it doesn't happen on vite, but since vite is very slow could be twice or thrice longer to load a story than webpack I decided not to use it.

If any of you can help would be appreciated. Thanks!

Package.json attached below

[tough chasm]

  "peerDependencies": {
    "react": "^17.0.2 || ^18.2.0",
    "react-dom": "^17.0.2 || ^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.4",
    "@storybook/addon-essentials": "^7.0.2",
    "@storybook/addon-interactions": "^7.0.2",
    "@storybook/addon-links": "^7.0.2",
    "@storybook/blocks": "^7.0.2",
    "@storybook/react": "^7.0.2",
    "@storybook/react-webpack5": "^7.0.2",
    "@storybook/testing-library": "^0.1.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.5",
    "@testing-library/react-hooks": "^8.0.1",
    "@types/jest": "^29.5.0",
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@types/source-map": "^0.5.7",
    "@types/uglify-js": "^3.17.1",
    "@types/webpack-sources": "^3.2.0",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.1",
    "devextreme-themebuilder": "22.2.4",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "jest-junit": "^15.0.0",
    "mini-css-extract-plugin": "^2.6.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-test-renderer": "^18.2.0",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2",
    "storybook": "^7.0.2",
    "style-loader": "^3.3.1",
    "ts-jest": "^29.0.2",
    "typescript": "^4.9.5",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.6",
    "@mui/x-date-pickers": "^6.0.2",
    "@svgr/webpack": "^7.0.0",
    "date-fns": "2.29.3",
    "devextreme": "22.2.3",
    "devextreme-react": "22.2.3",
    "notistack": "^3.0.1",
    "typeface-barlow": "^1.1.13",
    "typeface-roboto": "^1.1.13"
  }

[tough chasm]

ok this is weird, I tried reinstalling all package.json with yarn (1.22.19) install and the issue is suddenly solved. It's weird, why is it happening with npm even though I did delete all node_modules and did npm i again

[burnt steeple]

Surprised to hear vite is slow for you. It’s usually much faster than webpack (at least for dev mode)

In general yarn seems to be smarter about hoisting than npm. It’s case by case, but it feels like 9/10 times weird dependency issues can be solved by switching from npm to yarn. We’re actively working to simplify storybook’s dependency structure to eliminate these kinds of problems

[tough chasm]

I found out that this broken on npm is probably because of the react 18 and react-dom 18 installation
@testing-library/react and @testing-library/react-hooks still uses react 17 so that might be causing dependency issues, something also might have happened in package-lock.json since I need to delete it to fix it.

I tried deleting every node_modules and updated testing-library's plugin and deleted package-lock.json and it works now

[burnt steeple]

@tough chasm FYI there is was a perf regression in the most recent release of one of the vite builder's plugins. We'll be releasing a fix for that today