Facing issue when running storybook on web

[inkredusk]

Hi,

I am facing an issue when running the command npm run storybook:web.

OS : Windows
Node version: v22.11.0
Expo version: 52.0.17
Storybook version: 8.4.7
Typescript: 5.3.3

Below is the error:

npm run storybook:web

awesomestorybookinexpo@1.0.0 storybook:web
storybook dev -p 6006

@storybook/core v8.4.7

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

Original error:
Error: Transform failed with 1 error:
(define name):1:0: ERROR: Expected identifier but found "import"
at failureErrorWithLog (\node_modules\esbuild\lib\main.js:1476:15)
at \node_modules\esbuild\lib\main.js:755:50
at responseCallbacks. (\node_modules\esbuild\lib\main.js:622:9)
at handleIncomingPacket (\node_modules\esbuild\lib\main.js:677:12)
at Socket.readFromStdout (\node_modules\esbuild\lib\main.js:600:7)
at Socket.emit (node:events:518:28)
at addChunk (node:internal/streams/readable:561:12)
at readableAddChunkPushByteMode (node:internal/streams/readable:512:3)
at Readable.push (node:internal/streams/readable:392:5)
at Pipe.onStreamRead (node:internal/stream_base_commons:189:23)
at loadMainConfig (.\node_modules@storybook\core\dist\common\index.cjs:17511:11)
at async buildDevStandalone (.\node_modules@storybook\core\dist\core-server\index.cjs:37134:11)
at async withTelemetry (.\node_modules@storybook\core\dist\core-server\index.cjs:35757:12)
at async dev (.\node_modules@storybook\core\dist\cli\bin\index.cjs:2591:3)
at async s. (.\node_modules@storybook\core\dist\cli\bin\index.cjs:2643:74)

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

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

Can someone please help?

[dannyhw]

Please share your main.js

[inkredusk]

@dannyhw : This is my main.ts file (am using Typescript)

// .storybook/main.ts

module.exports = {
stories: [
"../components//*.stories.mdx",
"../components//*.stories.@(js|jsx|ts|tsx)",
],

addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-react-native-web",
"@storybook/addon-webpack5-compiler-babel",
"@chromatic-com/storybook"
],

framework: {
name: "@storybook/react-webpack5",
options: {},
},

docs: {},

typescript: {
reactDocgen: "react-docgen-typescript"
}
};

[dannyhw]

maybe try doing export default instead of module.exports

[inkredusk]

Hi @dannyhw ,

I tried something like this. However, still getting the same error :(

const StorybookConfig = {
stories: [
"../components//*.stories.mdx",
"../components//*.stories.@(js|jsx|ts|tsx)",
],

addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-react-native-web",
"@storybook/addon-webpack5-compiler-babel",
"@chromatic-com/storybook"
],

framework: {
name: "@storybook/react-webpack5",
options: {},
},

docs: {},

typescript: {
reactDocgen: "react-docgen-typescript"
}
};

export default StorybookConfig;

[dannyhw]

can you share the project? or a reproduction where you experience the problem?

[inkredusk]

Hi @dannyhw , I just ran this command from the Getting started section of this repo only. I have not created any new project that I can share with you.

npx create-expo-app --template expo-template-storybook AwesomeStorybook

After that I tried running the command : npm run storybook:web

[dannyhw]

@inkredusk ah ok well the template is actually a different repo here https://github.com/dannyhw/expo-template-storybook

but let me just test that real quick then

[dannyhw]

Hmm yeah I'm seeing the issue too, thanks for reporting will look into it

[dannyhw]

@inkredusk seems to be an esbuild thing: storybookjs/storybook#30115

adding

 "overrides": {
    "esbuild": "0.24.0"
  },

in package.json should resolve for now until 8.4.8 is out.

[inkredusk]

Yes , its working fine for me now. I tried running the command npm run storybook:web. Thanks a lot for quick response. PFB working screenshot. Please close this issue