storybookjs/storybook

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

Closed this issue · 9 comments

davidcalhoun commented

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
davidcalhoun commented

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 commented

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 commented

@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"
    }
  },
  • 🎉4
  • 🚀1
davidcalhoun commented

@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!

  • 😄1
chioio commented

Try to add .babelrc :

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}
  • 👍19
bfunc commented

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

  • 👍2
jg-til commented

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?

  • 👍1
JeanSummers commented

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';

...
  • 👍7
deipkumar commented

Should also double-check that your tsconfig exists in your build environment - for example I accidentally had tsconfig in my .dockerignore which resulted in this issue