[Bug]: Unable to install storybook (_d.toLowerCase is not a function)

masterprompt commented 6 months ago

Describe the bug

Did a fresh install of storybook into our new app (create_react_app with typescript) via npx storybook@latest init

Node v20.9.0

"dependencies": {
    "@auth0/auth0-react": "^2.2.4",
    "@tanstack/react-query": "^4.36.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.58",
    "@types/react": "^18.2.28",
    "@types/react-dom": "^18.2.13",
    "axios": "^1.6.0",
    "jmespath": "^0.16.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "query-string": "^8.1.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.1",
    "react-bootstrap-icons": "^1.10.3",
    "react-data-table-component": "^7.5.4",
    "react-dom": "^18.2.0",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "react-tag-autocomplete": "^7.1.0",
    "sass": "^1.69.5",
    "styled-components": "^5.3.11",
    "typescript": "^4.9.5",
    "use-local-storage": "^3.0.0",
    "web-vitals": "^2.1.4"
},
  "devDependencies": {
    "@chromatic-com/storybook": "^1.2.18",
    "@storybook/addon-essentials": "^8.0.0",
    "@storybook/addon-interactions": "^8.0.0",
    "@storybook/addon-links": "^8.0.0",
    "@storybook/addon-onboarding": "^8.0.0",
    "@storybook/blocks": "^8.0.0",
    "@storybook/preset-create-react-app": "^8.0.0",
    "@storybook/react": "^8.0.0",
    "@storybook/react-webpack5": "^8.0.0",
    "@storybook/test": "^8.0.0",
    "@types/jmespath": "^0.15.2",
    "@types/lodash": "^4.14.200",
    "eslint-plugin-storybook": "^0.8.0",
    "prop-types": "^15.8.1",
    "storybook": "^8.0.0",
    "webpack": "^5.90.3"
  }

Everything seems to install properly, but once storybook attempts to run for the first time we get:

Running Storybook

> spa@0.1.0 storybook
> storybook dev -p 6006 --initial-path=/onboarding --quiet

@storybook/cli v8.0.0

SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.ts file.

TypeError: _d.toLowerCase is not a function
    at getOptions (/node_modules/esbuild-register/dist/node.js:4761:101)
    at compile2 (/node_modules/esbuild-register/dist/node.js:4880:21)
    at Module._compile (/node_modules/esbuild-register/dist/node.js:2254:31)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Object.newLoader [as .ts] (/node_modules/esbuild-register/dist/node.js:2262:9)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at interopRequireDefault (/node_modules/@storybook/core-common/dist/index.js:6:21)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

To Reproduce

cannot reproduce using your instructions. Hoping the stack trace above will help.

System

No response

Additional context

No response

valentinpalkovic commented 6 months ago

Could you try out Node.js v18 for testing purposes?

dougwperez commented 5 months ago

I am getting the same error, and I have node.js v18. @valentinpalkovic @shilman

masterprompt commented 5 months ago

Worth noting I was able to install storybook in other projects on the same laptop (node v20). For some reason this project just doesnt like it.

JalalHabeeb commented 5 months ago

I'm having the same problem with "vite". I'm getting this error SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook\main.ts file. Error: Cannot find module 'vite'

valentinpalkovic commented 5 months ago

@JalalHabeeb Do you have vite installed as a dependency?

JalalHabeeb commented 5 months ago

@valentinpalkovic, sure I did. This the .storybook/main.ts file `import type { StorybookConfig } from "@storybook/react-vite"; import path from "path"; import tsconfigPaths from "vite-tsconfig-paths";

const config: StorybookConfig = { stories: ["../src/*/.mdx", "../src/*/.stories.@(js|jsx|mjs|ts|tsx)"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-onboarding", "@storybook/addon-interactions", ], framework: { name: "@storybook/react-vite", options: {}, }, docs: { autodocs: "tag", }, viteFinal: async (config) => { config.plugins?.push( tsconfigPaths({ projects: [path.resolve(path.dirname(__dirname), "tsconfig.json")], }) );

return config;

}, }; export default config;`

JalalHabeeb commented 5 months ago

When I remove the viteFinal function, it works. But when I add it it doesn't. I don't know what is the mistake here.

valentinpalkovic commented 5 months ago

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

github-actions[bot] commented 4 months ago

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] commented 4 months ago

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.

squidjam commented 2 months ago

Can we agree that issues that depend from upgrades cannot provide a minimal reproduction? This has happened to me to, I have no means to show it to you

storybookjs / storybook