[Bug] Upgrade to 7.4.2 introduce an error "Cannot read properties of undefined (reading 'secondary')"

[Samox]

What version of vite are you using?

4.4.9

System info and storybook versions

Storybook Environment Info:

System: OS: macOS 13.5.2 CPU: (10) arm64 Apple M1 Max Shell: 5.9 - /bin/zsh Binaries: Node: 18.15.0 - ~/Library/Caches/fnm_multishells/24408_1694769074594/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 9.5.0 - ~/Library/Caches/fnm_multishells/24408_1694769074594/bin/npm <----- active Browsers: Chrome: 116.0.5845.187 Safari: 16.6

Describe the Bug

I upgraded from storybook 7.1.0 to 7.4.2, using the command "npx storybook@latest upgrade" Now I have this error on the documentation page:

Cannot read properties of undefined (reading 'secondary')
TypeError: Cannot read properties of undefined (reading 'secondary')
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-S27LUW63.js?v=a0122f55:944:645
    at handleInterpolation (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-5BBS334X.js?v=a0122f55:1347:47)
    at serializeStyles (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-5BBS334X.js?v=a0122f55:1415:15)
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-5BBS334X.js?v=a0122f55:1629:24
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-5BBS334X.js?v=a0122f55:1434:12
    at renderWithHooks (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-4U7GP6VK.js?v=a0122f55:12171:26)
    at updateForwardRef (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-4U7GP6VK.js?v=a0122f55:14327:28)
    at beginWork (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-4U7GP6VK.js?v=a0122f55:15934:22)
    at beginWork$1 (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-4U7GP6VK.js?v=a0122f55:19749:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-4U7GP6VK.js?v=a0122f55:19194:20)

I tried to drill down to the line with the error and it seems the property theme.color is undefined.

var IconButton = newStyled(ButtonOrLink, { shouldForwardProp: isPropValid })(() => ({ alignItems: "center", background: "transparent", border: "none", borderRadius: 4, color: "inherit", cursor: "pointer", display: "inline-flex", fontSize: 13, fontWeight: "bold", height: 28, justifyContent: "center", marginTop: 6, padding: "8px 7px", "& > svg": { width: 14 } }), ({ active, theme }) => active ? { backgroundColor: theme.background.hoverable, color: theme.color.secondary } : {}, ({ disabled, theme }) => disabled ? { opacity: 0.5, cursor: "not-allowed" } : { "&:hover, &:focus-visible": { background: curriedTransparentize$1(0.88, theme.color.secondary), color: theme.color.secondary }, "&:focus-visible": { outline: auto }, "&:focus:not(:focus-visible)": { outline: "none" } });

I use a custom theme (you can check in the reproductible example) with emotion and withThemeFromJSXProvider it might come from this, but don't know how to debug this. If I remove the theme I still have the error.

Happy to work on the pull request with some indications 😇

Link to Minimal Reproducible Example

https://github.com/data-drift/data-drift/pull/156

Participation

• [X] I am willing to submit a pull request for this issue.

[joebnb]

same issue happend

[mariovisnjic]

+1 all docs are broken

[yagamicoder]

I am also seeing the same issue using Vite after upgrading to 7.4.3

[luiz504]

Same here after upgrading to 7.4.3 using Vite. I get these errors with the docs generated by autodocs.

[jlandrum]

I added themes to a 7.2x storybook instance - which of course added the 7.4x themes package and still get this error. The issue may lie in the themes dependency more than storybook core.

Edit: I ran npx npm-check-updates -u then npm install and the issue went away. It's possible some versioning issues within npm are causing this as I've had issues in the past with npm not installing the latest because of perceived incompatibilities.

Including my devDependencies for cross-checking as the docs now work fine for me:

    "@storybook/addon-a11y": "^7.4.3",
    "@storybook/addon-essentials": "^7.4.3",
    "@storybook/addon-interactions": "^7.4.3",
    "@storybook/addon-links": "^7.4.3",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.4.3",
    "@storybook/manager-api": "^7.4.3",
    "@storybook/react": "^7.4.3",
    "@storybook/react-vite": "^7.4.3",
    "@storybook/testing-library": "^0.2.1",
    "@storybook/theming": "^7.4.3",
    "@types/react": "^18.2.22",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
    "@typescript-eslint/parser": "^6.7.2",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.49.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "eslint-plugin-storybook": "^0.6.14",
    "gh-pages": "^6.0.0",
    "postcss": "^8.4.30",
    "storybook": "^7.4.3",
    "tailwind-scrollbar": "^3.0.5",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.2.2",
    "vite": "^4.4.9",
    "vite-plugin-svgr": "^4.0.0"

[mariovisnjic]

deleting node_modules and package-lock.json and reinstalling with 7.4.3 worked for me

[joebnb]

deleting node_modules and package-lock.json and reinstalling with 7.4.3 worked for me

also works for me(7.4.1,7.4.2 seems still throw this error)

[marcinkrawiec]

I had the same issue after upgrading from 7.4.0 to 7.4.5.

Running rm -rf node_modules && npx npm-check-updates -u && npm install didn't help. Removing both package-lock.json and node_modules, and then running npm install have worked for me.

[Samox]

Nice ! It works for me as well There was a @storybook/types": "7.1.0" in the package.lock from manager-api, but after the hard refresh, it was not there.

[jakubbania]

Had the same issue - after some debugging I noticed that I had version mismatch between storybook related packages:

    "storybook": "7.5.3",
    "@storybook/react": "7.5.3",
    "@storybook/react-vite": "7.5.3",
    ...
    "@storybook/theming": "6.5.13",

bumping package version to match storybook dependencies fixed the issue.