Storybook: TypeScript addons

[TheKnarf]

Describe the bug
I'm looking to write a storybook addon in TypeScript. I need this to be able to import and use some shared enums from my react codebase that's written in TypeScript. I assumed that by upgrading to the newest @latest release that it would work based on this issue.

Instead I'm getting the following error:

info => Loading presets
WARN   Failed to load preset: "/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/.storybook/mockableapi/register.tsx" on level 1
ERR! /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/.storybook/mockableapi/register.tsx:1
ERR! import React, { useState } from 'react';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (vm.js:344:18)
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1106:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1140:27)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:1040:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:929:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1080:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at interopRequireDefault (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:172:16)
ERR!     at loadPreset (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:182:20)
ERR!     at /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:243:18)
ERR!     at loadPreset (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:208:18)
ERR!     at /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!  /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/.storybook/mockableapi/register.tsx:1
ERR! import React, { useState } from 'react';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (vm.js:344:18)
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1106:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1140:27)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:1040:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:929:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1080:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at interopRequireDefault (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:172:16)
ERR!     at loadPreset (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:182:20)
ERR!     at /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:243:18)
ERR!     at loadPreset (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:208:18)
ERR!     at /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:244:18
info => Loading presets
WARN   Failed to load preset: "/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/.storybook/mockableapi/register.tsx" on level 1
ERR! /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/.storybook/mockableapi/register.tsx:1
ERR! import React, { useState } from 'react';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (vm.js:344:18)
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1106:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1140:27)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:1040:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:929:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1080:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at interopRequireDefault (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:172:16)
ERR!     at loadPreset (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:182:20)
ERR!     at /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:243:18)
ERR!     at loadPreset (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:208:18)
ERR!     at /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!  /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/.storybook/mockableapi/register.tsx:1
ERR! import React, { useState } from 'react';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (vm.js:344:18)
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1106:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1140:27)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:1040:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:929:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1080:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at interopRequireDefault (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:172:16)
ERR!     at loadPreset (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:182:20)
ERR!     at /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:243:18)
ERR!     at loadPreset (/Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:208:18)
ERR!     at /Users/knarf/projects/agder/GeneralPublic/WebApplication/ClientApp/node_modules/@storybook/core/dist/server/presets.js:244:18
info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
WARN We found no files matching any of the following globs:
WARN
WARN ../src/**/*.stories.(js|jsx|ts|tsx|mdx)
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
29% building 165/177 modules 12 active ...alPublic/WebApplication/ClientApp/node_modules/core-js/modules/esnext.symbol.pattern-match.jsBrowserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
webpack built fa2553e96fb318e26d9d in 24742ms
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.0.0-beta.15 started                   │
│   23 s for manager and 27 s for preview             │
│                                                     │
│    Local:            http://localhost:9009/         │
│    On your network:  http://192.168.10.124:9009/    │
│                                                     │
╰─────────────────────────────────────────────────────╯

To Reproduce

1. Upgrade to version 6.0.0-beta.15
2. Change main.js to main.ts and preview.js to preview.ts
3. Try to add an addon that's a .tsx file

Expected behavior
I expected to be able to write addons as ts / tsx files

Code snippets
.storybook/main.ts:

module.exports = {
  stories: ['../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-a11y/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-docs',
    __dirname + '/languageswitcher/register.js',
    __dirname + '/themeswitcher/register.js',
    __dirname + '/mockableapi/register.tsx', // <--- this import is creating troubles
  ],
};

System:

npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 72.0.2
    Safari: 13.1
  npmPackages:
    @storybook/addon-a11y: ^6.0.0-beta.15 => 6.0.0-beta.15
    @storybook/addon-actions: ^6.0.0-beta.15 => 6.0.0-beta.15
    @storybook/addon-docs: ^6.0.0-beta.15 => 6.0.0-beta.15
    @storybook/addon-knobs: ^6.0.0-beta.15 => 6.0.0-beta.15
    @storybook/addon-links: ^6.0.0-beta.15 => 6.0.0-beta.15
    @storybook/addons: ^6.0.0-beta.15 => 6.0.0-beta.15
    @storybook/preset-create-react-app: ^3.0.0 => 3.0.0
    @storybook/react: ^6.0.0-beta.15 => 6.0.0-beta.15

[shilman]

@TheKnarf Yeah this should work as part of the zero-config typescript stuff. Do you have a repro we can look at? Do you have typescript installed in your project? tsconfig.json? cc @mrmckeb

[TheKnarf]

The whole project is a typescript project. Using typescript for .storybook/main.ts seems to work. But using it for my custom addon __dirname + '/mockableapi/register.tsx' does not work.

Heres my tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "lib": ["es2019", "dom"],
    "typeRoots": ["./typings", "./node_modules/@types"],
    "types": ["node"]
  },
  "include": ["src/**/*", "typings/**/*"]
}

I could try and make a minimal example that I could publish, but that would take me some time.

[mrmckeb]

We haven't tested having an addon in TypeScript yet, but like @shilman I would have expected this to work. Are you able to provide a small repro?

[TheKnarf]

Okay, minimal example created: https://github.com/TheKnarf/storybookjs-issue-10938

[mrmckeb]

Thanks for finding the root issue @shilman - this should be solved by #10980 @TheKnarf :)

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.18 containing PR #10980 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.