storybookjs/storybook

`ts-node` in dependency tree breaks Storybook with TypeScript config

Closed

#19,192 opened on Sep 14, 2022

 (1 comment) (7 reactions) (0 assignees)TypeScript (10,058 forks)batch import
configuration babel / webpackdocumentationhas workaroundhelp wanted

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

After following the instructions to configure my project with TypeScript, if I install ts-node or a dependency that depends on ts-node, then npm run storybook exits with the following error:

/Users/me/test/storybook-ts-node/.storybook/main.ts:15

SyntaxError: Unexpected token 'export'
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1033:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1069:27)
ERR!     at Module.m._compile (/Users/me/test/storybook-ts-node/node_modules/ts-node/src/index.ts:1618:23)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
ERR!     at Object.require.extensions.<computed> [as .ts] (/Users/me/test/storybook-ts-node/node_modules/ts-node/src/index.ts:1621:12)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)

If I remove the package then npm run storybook works fine.

To Reproduce

  1. Clone this repo: https://github.com/tim-phillips/storybook-ts-node-repro
  2. Run npm run storybook
  3. Observe SyntaxError

I cannot deploy this reproduction since the bug prevents build.

In this repro, @commitlint/cli includes the dependency ts-node.

System

Environment Info:

  System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.15.1 - ~/.volta/tools/image/node/16.15.1/bin/node
    Yarn: 3.2.3 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
    npm: 8.11.0 - ~/.volta/tools/image/node/16.15.1/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Firefox: 95.0.2
    Safari: 15.6
  npmPackages:
    @storybook/addon-actions: ^6.5.11 => 6.5.11 
    @storybook/addon-docs: ^6.5.11 => 6.5.11 
    @storybook/addon-essentials: ^6.5.11 => 6.5.11 
    @storybook/addon-interactions: ^6.5.11 => 6.5.11 
    @storybook/addon-links: ^6.5.11 => 6.5.11 
    @storybook/builder-webpack5: ^6.5.11 => 6.5.11 
    @storybook/manager-webpack5: ^6.5.11 => 6.5.11 
    @storybook/node-logger: ^6.5.11 => 6.5.11 
    @storybook/preset-create-react-app: ^4.1.2 => 4.1.2 
    @storybook/react: ^6.5.11 => 6.5.11 
    @storybook/testing-library: ^0.0.13 => 0.0.13 

Contributor guide