.storybook/main.ts no longer parses correctly, gets SyntaxError: Unexpected token error (@storybook/*@6.5.0-alpha.42) #17589

davidcalhoun · 2022-02-26T22:38:01Z

EDIT: found the fix below

Describe the bug
Using imports/exports in .storybook/main.ts seems to no longer parse correctly, resulting in a build error SyntaxError: Unexpected token when running start-storybook.

I've reproduced this in a simple repro that uses Webpack 4 (the default).

Strangely, initially I ran into this error with my original repo running @storybook/*@6.4.19 when trying to opt in to using Webpack 5 with these migration instructions. Though it's worth noting that with the minimal repro on Webpack 4, I got these errors even when forcing package resolutions from @storybook/*@6.5.0-alpha.42 down to @storybook/*@6.4.19.

Doesn't build (using suggested formatting from Storybook's react-ts example base.ts):

// .storybook/base.ts
import type { StorybookConfig } from '@storybook/react/types';

module.exports = {
  ...
}

Builds successfully:

// .storybook/base.ts

module.exports = {
  ...
}

To Reproduce
Reproduction repo: https://github.com/davidcalhoun/storybook-react-typescript-repro

Steps to recreate from scratch: https://github.com/davidcalhoun/storybook-react-typescript-repro#steps-to-recreate-from-scratch

System

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 3.1.1 - ~/.yarn/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Edge: 98.0.1108.62
    Firefox: 96.0.3
    Safari: 15.0

Additional context
Full error output is included in the repro's readme, I'm also pasting it in here for searchability:

Error from the simple repro

dcalhoun@Davids-MacBook-Pro-2 storybook-react-typescript-repro % yarn storybook
info @storybook/react v6.5.0-alpha.42
info
ERR! SyntaxError: /Users/dcalhoun/dev/storybook-react-typescript-repro/.storybook/main.ts: Unexpected token, expected "from" (1:12)
ERR!
ERR! > 1 | import type { StorybookConfig } from '@storybook/react/types';
ERR!     |             ^
ERR!   2 |
ERR!   3 | module.exports = {
ERR!   4 |   "stories": [
ERR!     at Parser._raise (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:476:17)
ERR!     at Parser.raiseWithData (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:469:17)
ERR!     at Parser.raise (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:430:17)
ERR!     at Parser.unexpected (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:3789:16)
ERR!     at Parser.expectContextual (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:3744:18)
ERR!     at Parser.parseImport (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:15704:12)
ERR!     at Parser.parseStatementContent (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14223:27)
ERR!     at Parser.parseStatement (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14113:17)
ERR!     at Parser.parseBlockOrModuleBlockBody (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14739:25)
ERR!     at Parser.parseBlockBody (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14730:10)
ERR!     at Parser.parseProgram (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14032:10)
ERR!     at Parser.parseTopLevel (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14019:25)
ERR!     at Parser.parse (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:15940:10)
ERR!     at parse (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:15992:38)
ERR!     at parser (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/core/lib/parser/index.js:52:34)
ERR!     at parser.next (<anonymous>)
ERR!  SyntaxError: /Users/dcalhoun/dev/storybook-react-typescript-repro/.storybook/main.ts: Unexpected token, expected "from" (1:12)
ERR!
ERR! > 1 | import type { StorybookConfig } from '@storybook/react/types';
ERR!     |             ^
ERR!   2 |
ERR!   3 | module.exports = {
ERR!   4 |   "stories": [
ERR!     at Parser._raise (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:476:17)
ERR!     at Parser.raiseWithData (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:469:17)
ERR!     at Parser.raise (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:430:17)
ERR!     at Parser.unexpected (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:3789:16)
ERR!     at Parser.expectContextual (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:3744:18)
ERR!     at Parser.parseImport (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:15704:12)
ERR!     at Parser.parseStatementContent (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14223:27)
ERR!     at Parser.parseStatement (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14113:17)
ERR!     at Parser.parseBlockOrModuleBlockBody (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14739:25)
ERR!     at Parser.parseBlockBody (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14730:10)
ERR!     at Parser.parseProgram (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14032:10)
ERR!     at Parser.parseTopLevel (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:14019:25)
ERR!     at Parser.parse (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:15940:10)
ERR!     at parse (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/parser/lib/index.js:15992:38)
ERR!     at parser (/Users/dcalhoun/dev/storybook-react-typescript-repro/node_modules/@babel/core/lib/parser/index.js:52:34)
ERR!     at parser.next (<anonymous>) {
ERR!   loc: Position { line: 1, column: 12, index: 12 },
ERR!   pos: 12,
ERR!   code: 'BABEL_PARSE_ERROR',
ERR!   reasonCode: 'UnexpectedToken'
ERR! }

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

Error from a yarn monorepo which has an `export * from...` as the first line of its `.storybook/main.ts` file

% yarn workspace [REDACTED] start-storybook -p 6006
info @storybook/react v6.4.19
info
ERR! /Users/dcalhoun/dev/[REDACTED]/packages/app/.storybook/main.ts:1
ERR! export * from '[REDACTED]/config/storybook/main';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Unexpected token 'export'
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Module._compile (/Users/dcalhoun/dev/[REDACTED]/.yarn/cache/pirates-npm-4.0.1-377058e8fc-091e232aac.zip/node_modules/pirates/lib/index.js:99:24)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.newLoader [as .ts] (/Users/dcalhoun/dev/[REDACTED]/.yarn/cache/pirates-npm-4.0.1-377058e8fc-091e232aac.zip/node_modules/pirates/lib/index.js:104:7)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.external_module_.Module._load (/Users/dcalhoun/dev/[REDACTED]/.pnp.cjs:47551:14)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at interopRequireDefault (/Users/dcalhoun/dev/[REDACTED]/.yarn/__virtual__/@storybook-core-common-virtual-efc08e55c3/0/cache/@storybook-core-common-npm-6.4.19-54b55d19ba-3f10064014.zip/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/dcalhoun/dev/[REDACTED]/.yarn/__virtual__/@storybook-core-common-virtual-efc08e55c3/0/cache/@storybook-core-common-npm-6.4.19-54b55d19ba-3f10064014.zip/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/dcalhoun/dev/[REDACTED]/.yarn/__virtual__/@storybook-core-server-virtual-c36c68fb38/0/cache/@storybook-core-server-npm-6.4.19-9c09ed894e-7c601f1bbf.zip/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (/Users/dcalhoun/dev/[REDACTED]/.yarn/__virtual__/@storybook-core-server-virtual-c36c68fb38/0/cache/@storybook-core-server-npm-6.4.19-9c09ed894e-7c601f1bbf.zip/node_modules/@storybook/core-server/dist/cjs/build-dev.js:102:71)
ERR!     at buildDev (/Users/dcalhoun/dev/[REDACTED]/.yarn/__virtual__/@storybook-core-server-virtual-c36c68fb38/0/cache/@storybook-core-server-npm-6.4.19-9c09ed894e-7c601f1bbf.zip/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
ERR!  /Users/dcalhoun/dev/[REDACTED]/packages/app/.storybook/main.ts:1

The text was updated successfully, but these errors were encountered:

davidcalhoun · 2022-02-27T00:04:47Z

I just found the fix via this issue, looks like I just needed to add ts-node as a missing step. This fixed it!

yarn add --dev ts-node

It looks like the updated docs aren't live yet - this info about using ts-node with main.ts will be here: https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript

Also recommend adding the info to this page: https://storybook.js.org/docs/react/configure/typescript

Might also be handy to see this in the react-ts example: https://github.com/storybookjs/storybook/blob/v6.5.0-alpha.42/examples/react-ts/package.json

davidcalhoun · 2022-02-27T00:43:12Z

I was still getting an syntax error in my own project even after adding ts-node. Turns out I also needed to make this change:

// tsconfig.json
{
  "compilerOptions": {
    ...
-    "module": "esnext",
+    "module": "commonjs",
  }
}

Gregorein · 2022-03-23T18:46:57Z

@davidcalhoun, a bit of a necro, but you could try adding the following entry in tsconfig.json, solved a similar issue for me

  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  },

davidcalhoun · 2022-03-23T19:14:27Z

@Gregorein Woot, thank you! Just tried it and it worked here as well. I didn't know you could scope TS config to packages like that, that's a way nicer solution!

chioio · 2022-07-03T15:48:43Z

Try to add .babelrc :

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

bfunc · 2023-04-11T10:31:17Z

@chioio tnx adding @babel/preset-typescript solved my case

jg-til · 2024-03-20T23:00:55Z

But why is this issue closed if one still needs to encounter the error, perform a Google search with error contents, come across this bug report, and then scroll through and attempt the various suggestions in order to resolve the issue?

JeanSummers · 2024-03-25T09:19:51Z

This issue is relevant again in storybook 8.0.4

12:14:12 PM [vite] Internal server error: .../.storybook/preview.ts: Unexpected token, expected "from" (3:12)

  1 | import '@fontsource/roboto';
  2 | import { withThemeFromJSXProvider } from '@storybook/addon-themes';
> 3 | import type { Preview } from '@storybook/react';

...

davidcalhoun added bug needs triage labels Feb 26, 2022

davidcalhoun closed this as completed Feb 27, 2022

storyworks mentioned this issue Jul 5, 2022

chore: add storybook, basic story and documentation example slnz/go#1

Merged

elliotgonzalez123 mentioned this issue Feb 28, 2023

[Bug]: Test runner does not run if main storybook config file is a Typescript file in NextJs #21298

Closed

obrummer mentioned this issue Apr 13, 2023

Test setup1 cybercom-finland/knowit-finland-design-system#3

Merged

iborymagic mentioned this issue Apr 21, 2024

[1단계 - 페이먼츠] - 초코(강다빈) 미션 제출합니다. woowacourse/react-payments#357

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

.storybook/main.ts no longer parses correctly, gets SyntaxError: Unexpected token error (@storybook/*@6.5.0-alpha.42) #17589

.storybook/main.ts no longer parses correctly, gets SyntaxError: Unexpected token error (@storybook/*@6.5.0-alpha.42) #17589

davidcalhoun commented Feb 26, 2022 •

edited

davidcalhoun commented Feb 27, 2022

davidcalhoun commented Feb 27, 2022 •

edited

Gregorein commented Mar 23, 2022

davidcalhoun commented Mar 23, 2022

chioio commented Jul 3, 2022

bfunc commented Apr 11, 2023

jg-til commented Mar 20, 2024

JeanSummers commented Mar 25, 2024

.storybook/main.ts no longer parses correctly, gets SyntaxError: Unexpected token error (@storybook/*@6.5.0-alpha.42) #17589

.storybook/main.ts no longer parses correctly, gets SyntaxError: Unexpected token error (@storybook/*@6.5.0-alpha.42) #17589

Comments

davidcalhoun commented Feb 26, 2022 • edited

Doesn't build (using suggested formatting from Storybook's react-ts example base.ts):

Builds successfully:

Error from the simple repro

Error from a yarn monorepo which has an export * from... as the first line of its .storybook/main.ts file

davidcalhoun commented Feb 27, 2022

davidcalhoun commented Feb 27, 2022 • edited

Gregorein commented Mar 23, 2022

davidcalhoun commented Mar 23, 2022

chioio commented Jul 3, 2022

bfunc commented Apr 11, 2023

jg-til commented Mar 20, 2024

JeanSummers commented Mar 25, 2024

davidcalhoun commented Feb 26, 2022 •

edited

Error from a yarn monorepo which has an `export * from...` as the first line of its `.storybook/main.ts` file

davidcalhoun commented Feb 27, 2022 •

edited