Next.js + TypeScript + Storybook compatibility issues

[stephenkoo]

Describe the bug
Following the TypeScript instructions & recommended config in the Storybook docs results in TS2769: No overload matches this call errors when running build storybook with Next.js.

Specifically in my Next.js setup:

1. /src/stories/0-Welcome.stories.tsx(8,54)
   2./src/stories/1-Button.stories.tsx(8,48)

To Reproduce
Steps to reproduce the behavior:

1. Clone to https://github.com/stephenkoo/aesther/compare/sk/feat-add-storybook
2. Run yarn storybook

Expected behavior
Storybook to run with no errors.

Screenshots

Code snippets

The following are changes & additions made to out-of-the-box Next.js & TS setup based on Storybook TS Config documentation + some Storybook addons

.storybook/main.ts:

const path = require('path')

module.exports = {
  stories: ['../src/**/*.stories.(tsx|mdx)'],
  addons: [
    // Addons
    '@storybook/addon-a11y/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-links/register',
    '@storybook/addon-storysource/register',
    // Presets
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, '../tsconfig.json'),
        },
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, '../src')],
      },
    },
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('awesome-typescript-loader'),
        },
        {
          loader: require.resolve('react-docgen-typescript-loader'),
        },
      ],
    })
    config.resolve.extensions.push('.ts', '.tsx')
    return config
  },
}

.storybook/preview.ts:

import { addDecorator } from '@storybook/react'
import { withA11y } from '@storybook/addon-a11y'
import { withInfo } from '@storybook/addon-info'

addDecorator(withInfo)
addDecorator(withA11y)

jest.config.js

const { pathsToModuleNameMapper } = require('ts-jest/utils')
const { compilerOptions } = require('./tsconfig')

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  /**
   * Make tsconfig paths work in Jest
   * https://kulshekhar.github.io/ts-jest/user/config/#jest-config-with-helper
   */
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  // New stuff (not sure if needed)
  transform: {
    '.(ts|tsx)': 'ts-jest',
  },
  testPathIgnorePatterns: ['/node_modules/', '/lib/'],
  testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
  // End new stuff
}

tsconfig.json (some are Next.js defaults, some are Storybook recommended tsconfig.js settings)

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "noUnusedLocals": true,
    "sourceMap": true,
    "baseUrl": ".",
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build/lib",
    "paths": {
      "@App/*": ["src/*"]
    },
    "rootDirs": ["src"]
  },
  "exclude": ["node_modules", "build", "scripts"],
  "include": ["next-env.d.ts", "src/**/*"]
}

package.json scripts

  "scripts": {
    "dev": "next",
    "start": "next start",
    "storybook": "start-storybook -p 6006",
    "build": "yarn run lint && yarn run build-lib && build-storybook && next build",
    "build-lib": "tsc && yarn run copy-svg-to-lib && yarn run copy-png-to-lib",
    "build-lib-watch": "tsc -w",
    "build-storybook": "build-storybook",
    "copy-svg-to-lib": "cpx \"./src/**/*.svg\" ./build/lib",
    "copy-png-to-lib": "cpx \"./src/**/*.png\" ./build/lib",
    "lint": "tslint -c tslint.json './src/**/*.{ts,tsx}'",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest -- --coverage"
  },

System:

Environment Info:

  System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
  Binaries:
    Node: 13.6.0 - ~/.nvm/versions/node/v13.6.0/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.6.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-a11y: ^5.3.8 => 5.3.8 
    @storybook/addon-actions: ^5.3.8 => 5.3.8 
    @storybook/addon-docs: ^5.3.8 => 5.3.8 
    @storybook/addon-info: ^5.3.8 => 5.3.8 
    @storybook/addon-knobs: ^5.3.8 => 5.3.8 
    @storybook/addon-links: ^5.3.8 => 5.3.8 
    @storybook/addon-storysource: ^5.3.8 => 5.3.8 
    @storybook/addons: ^5.3.8 => 5.3.8 
    @storybook/preset-typescript: ^1.2.0 => 1.2.0 
    @storybook/react: ^5.3.8 => 5.3.8 

Additional context
I'm just trying to set up the simplest Next.js, TS, Storybook (& Jest, Styled Components) setup with reasonable presets.

[shilman]

@stephenkoo don't know if this will fix your problem, but the custom webpack config with webpackFinal is probably conflicting with preset-typescript, which is doing mostly the same thing (but using ts-loader). that certainly can't be helping things.

[stephenkoo]

Thanks, @shilman. Would you recommend keeping the TS preset here and removing the webpackFinal section?

{
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, '../tsconfig.json'),
        },
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, '../src')],
      },

[shilman]

Yeah, using presets is always recommended unless you need more configurability.

[stephenkoo]

Thanks. The preset (or webpackFinal) doesn't seem to handle React elements in preview.tsx - I'm unable to import GlobalStyles using the method here:

(Viewable on https://github.com/stephenkoo/aesther/compare/sk/feat-add-storybook):

import React from 'react'
import { addDecorator } from '@storybook/react'
import { GlobalStyle } from '../src/styles/global'

addDecorator(story => (
  <>
    <GlobalStyle />
    {story()}
  </>
))

because:

Module parse failed: Unexpected token (11:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| addDecorator(withA11y)
| addDecorator(story => (
>   <>
|     <GlobalStyle />
|     {story()}
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.tsx ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true main[2]

What's the right way to configure Storybook's preset to enable this?

[hasparus]

@stephenkoo Nobody transpiles your JSX. NextJS needs your tsconfig to have jsx: preserve, Storybook Preset TS needs jsx: react

[hasparus]

You can create new tsconfig.json in .storybook dir, extend the main one and override compilerOptions.jsx.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

[stephenkoo]

Thanks @hasparus for taking a look! I did as suggested but the "missing appropriate loader" error still seems to occur when running yarn storybook. :(

[hasparus]

Could you try pointing Storybook to the new tsconfig.json?

https://github.com/stephenkoo/aesther/blob/a376420804082e0fc8a6c2d2a99fe62f94c692f8/.storybook/main.ts#L17

Instead of ../tsconfig.json it will be ./tsconfig.json.

[hasparus]

Next uses Babel (preset next) so it won’t be exactly the same setup, but it might be enough for simple cases.

[stephenkoo]

@hasparus ah yes. Did so, but no luck still (Same error - updated branch above).
Am I missing some sort of webpack config needed for TS + Next & Storybook to play nice?

[hasparus]

I can’t try that on my computer until tomorrow, but could you add ".storybook" directory to include in main.ts?

include: [path.resolve(__dirname, '../src'), __dirname],

TBH I’m not sure if preview.tsx is supported at all. If adding __dirname won’t help, I’d try changing preview.tsx to preview.jsx and main.ts to main.js 🤔

[stephenkoo]

Thanks, @hasparus, it looks like it's working when I've implemented your changes. (I haven't checked if Jest is working properly but I'll assume it's working for now.)

EDIT: The main.ts & preview.tsx files are still read as JS, not as TS, unfortunately.

Here are my current files:

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "noUnusedLocals": true,
    "sourceMap": true,
    "baseUrl": ".",
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build/lib",
    "paths": {
      "@App/*": ["src/*"]
    },
    "rootDirs": ["src"]
  },
  "exclude": ["node_modules", "build", "scripts"],
  "include": ["next-env.d.ts", "src/**/*"]
}

jest.config.js

const { pathsToModuleNameMapper } = require('ts-jest/utils')
const { compilerOptions } = require('./tsconfig')

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  /**
   * Make tsconfig paths work in Jest
   * https://kulshekhar.github.io/ts-jest/user/config/#jest-config-with-helper
   */
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  // Code below is from Storybook TS docs (unsure if needed if using the ts-jest preset above)
  transform: {
    '.(ts|tsx)': 'ts-jest',
  },
  testPathIgnorePatterns: ['/node_modules/', '/lib/'],
  testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json']
}

.storybook/main.ts

const path = require('path')

module.exports = {
  stories: ['../src/**/*.stories.(tsx|mdx)'],
  addons: [
    // Addons
    '@storybook/addon-a11y/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-links/register',
    '@storybook/addon-storysource/register',
    // Presets
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, './tsconfig.json'),
        },
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, './tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [
          path.resolve(__dirname, '../src'),
          path.resolve(__dirname, '../.storybook'),
        ],
      },
    },
  ],
}

.storybook/preview.tsx

import React from 'react'
import { render } from 'react-dom'
import { withA11y } from '@storybook/addon-a11y'
import { withInfo } from '@storybook/addon-info'
import { addDecorator, configure } from '@storybook/react'
import { GlobalStyle } from '../src/styles/global'

addDecorator(withInfo)
addDecorator(withA11y)

const loadStories = () => {
  /**
   * Add GlobalStyles to stories without re-mounting for each story.
   * https://github.com/storybookjs/storybook/issues/5578#issuecomment-494656470
   */
  const globalStyleElId = 'global-style'
  const globalStyleEl =
    document.querySelector(`#${globalStyleElId}`) ||
    (() => {
      const el = document.createElement('div')
      el.id = globalStyleElId
      document.head.append(el)
      return el
    })()

  render(<GlobalStyle />, globalStyleEl)
}

configure(loadStories, module)

.storybook/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "jsx": "react"
  },
  "include": ["./**/*"]
}

[hasparus]

I didn't see your post just cloned your code too check if it really works lol :D It works indeed. I'm glad.

This means we could mention main.ts in the docs. I didn't know it's supported.
https://storybook.js.org/docs/configurations/typescript-config/#setting-up-typescript-to-work-with-storybook

Edit: Ok. It isn't :D I got BABEL_PARSE_ERROR after defining a type in main.ts. Looks like it's just treated as JavaScript.

[shilman]

I was playing around with main.ts the other day & don't remember off the top of my head, but it's something to do with your project's settings. I think I fixed it by setting "target": "es5" in tsconfig.json.

[stephenkoo]

@hasparus oh yeah - it looks like it's just javascript. I tried changing target to es5 & playing with lib in tsconfig but couldn't get types to work. :|

[mrmartineau]

FWIW me and the team at Curve have always had issues with v1.2.0 of the TypeScript preset. Fixing the package version to 1.1.0 ensures everything works without having to change from the default preset config.

[sentilesdal]

@shilman you were actually able to get a main.ts file working? I've been failing at this today. i'm considering opening an issue.

@stephenkoo, just to be clear you weren't able to get a main.ts file working (as opposed to main.js)

[shilman]

@sentilesdal yes I was able to get it working, after some fiddling. I don't think we officially support it though--I didn't even know it was possible until somebody mentioned it in another issue.

[stephenkoo]

@sentilesdal I wasn't able to get the ts file to be read as ts (type declarations caused errors), but it was read as js fine.

[sentilesdal]

@shilman thanks for the response. any clues on how to do this? I tried to launch storybook with ts-node but that still didn't do the trick. I'd really like to be able to import from our project's webpack.config.ts which I can only do if this main file is typescript :).

do you think it's worth opening an issue to get official support for this?

thanks in advance!

[shilman]

@sentilesdal What I observed when I was testing is that Storybook uses Babel's typescript handling and that my main.ts was getting automatically transpiled on load. However, my tsconfig wasn't properly set up and I had to tweak it.

I think that properly supporting this requires modifying Storybook to run its own loader logic on this file at load-time, rather than relying on the user's configuration. I think it's already doing this for manager.[tj]s and preview.[tj]s.

Please feel free to open an issue, and hopefully somebody from the community can take it on.

[Djiit]

FWIW, I've managed to work with ts and next using :

• plain JS files for main.js and preview.js

• an extended tsconfig.json inside .storybook (with jsx: react)

• importing React at the top of any components used in storybook AND stories.

Still not perfect, but good for our usage.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[breadadams]

Following up on @Djiit's suggestion, we've got it working with a similar approach, however without the need for the React imports thanks to babel-plugin-react-require - as suggested in the Storybook FAQs.

However, this only seems to work when we create the following .babelrc in the root directory:

{
  "presets": ["next/babel"], // necessary for next.js
  "plugins": ["react-require"]
}

If I move it to the .storybook directory (without the next/babel preset) we get an error when trying to load JSX:

Error: Module parse failed: Unexpected token (6:30)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   title: "Button"
| };
> export const withText = () => <Button>Hello Button</Button>;
| export const withEmoji = () => <Button>
|     <span role="img" aria-label="so cool">
    at Object../src/components/Button/index.stories.tsx (http://localhost:55727/main.a47420a434be88f4dd23.bundle.js:61:7)
    at __webpack_require__ (http://localhost:55727/runtime~main.a47420a434be88f4dd23.bundle.js:785:30)
    at fn (http://localhost:55727/runtime~main.a47420a434be88f4dd23.bundle.js:151:20)
    at webpackContext (http://localhost:55727/main.a47420a434be88f4dd23.bundle.js:35:9)
    at http://localhost:55727/vendors~main.a47420a434be88f4dd23.bundle.js:3878:31
    at Array.forEach (<anonymous>)
    at http://localhost:55727/vendors~main.a47420a434be88f4dd23.bundle.js:3877:22
    at Array.forEach (<anonymous>)
    at http://localhost:55727/vendors~main.a47420a434be88f4dd23.bundle.js:3876:14
    at render (http://localhost:55727/vendors~main.a47420a434be88f4dd23.bundle.js:1897:13)

I've looked through the docs but there seems to be no mention of extending the base Storybook babel config - but I have a feeling that may be what we need to do (?)

We're using the @storybook/preset-typescript add-on for TS support if that's of any help (and have no custom webpack config).

---

Edit: After some more messing about, it seems that just with the next/babel preset (without react-require plugin) in the root .storybook directory it works fine! 🤔

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[eric-burel]

Definitely not stale, still having issues in Vulcan to setup Next + TS + Storybook 6

[eric-burel]

Not stale. We have a working example in Vulcan with Storybook v6, TS, Next.js, but there is the very last issue of CSS module still not being correctly applied. Not significant yet it can become problematic if you actually use CSS modules in your frontend.

[Vadorequest]

For anyone interested with Storybook with Next.js 10 + TS 4.1 + jest + cypress 6 + Emotion 11 + tons of other stuff, check out UnlyEd/next-right-now#251 (PR)

It's still a WIP, but I've fixed the most complicated issues I was meant to encounter (babel/webpack, react providers, mocks).

Static version auto-hosted on vercel, deployed by github actions automatically.
Heavily documented, for my own sake. 😅

[eric-burel]

For anyone interested with Storybook with Next.js 10 + TS 4.1 + jest + cypress 6 + Emotion 11 + tons of other stuff, check out UnlyEd/next-right-now#251 (PR)

It's still a WIP, but I've fixed the most complicated issues I was meant to encounter (babel/webpack, react providers, mocks).

Static version auto-hosted on vercel, deployed by github actions automatically.
Heavily documented, for my own sake.

Awesome news that you plugged Storybook in! Did you manage to make CSS modules work out of the box? To me it's the main blocker to be able to close this specific issue. There might be other problems, unsupported features etc. that we may solve step by step, but CSS modules out of the box is really expected because that's the kind of stuff beginners want to use asap.

For the record, we've been working on vercel/next.js#19345 (@next/plugin-storybook) lately. We've come to the conclusion that Next webpack-config.ts need a cleanup before we can make a more robust Storybook plugin. I intend to dedicate some times to those issues in the first half of this year, feel free to reach out.

[Vadorequest]

If your question is "can you load .css files directly from Storybook" the answer is yes.

I didn't try it out with CSS modules specifically, as I don't use them. I'll give it a try.

[Vadorequest]

@eric-burel I successfully added support for CSS modules. It wasn't working by default, as you pointed out. But using https://www.npmjs.com/package/storybook-css-modules-preset basically fixed it for me.

See commit UnlyEd/next-right-now@777c3ce

Storybook demo at https://nrn-v2-mst-aptd-at-lcz-sty-storybook.vercel.app/?path=/story/utilities-i18nlink--link-with-css-module

[upeguiborja]

I am also getting an error related to this setup but I don't know if it is related to NextJS, we have a monorepo setup with two NextJS projects and a shared component library. The error appears when I use main.ts instead of main.js in my .storybook folder, it seems to be that ts-node is trying to parse the typescript file as common js even though it is set to esnext in the compilerOptions.

My tsconfig.json (top level)

{
    "compilerOptions": {
        "target": "ES2020",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "baseUrl": "."
    },
    "include": [
        "app/**/*",
        "marketing/**/*",
        "shared/**/*",
        "stories/**/*",
        ".storybook/**/*"
    ],
    "exclude": ["node_modules"]
}

My main.ts file

import type { StorybookConfig } from "@storybook/react/types";

const config: StorybookConfig = {
    stories: [
        "../stories/**/*.stories.mdx",
        "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    ],
    addons: [
        "@storybook/react",
        "@storybook/addon-essentials",
        "@storybook/addon-links",
        { name: "@storybook/preset-typescript" },
    ],
};

module.exports = config;

And the error I get

yarn run v1.22.11
$ start-storybook -p 6006
info @storybook/react v6.3.10
info 
ERR! /Users/xxxxxx/Projects/xxxxxx/xxxxxx/.storybook/main.ts:14
ERR! export {};
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.m._compile (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/ts-node/src/index.ts:1310:23)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.require.extensions.<computed> [as .ts] (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/ts-node/src/index.ts:1313: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)
ERR!     at interopRequireDefault (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:99:71)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async buildDev (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)
ERR!  /Users/xxxxxx/Projects/xxxxxx/xxxxxx/.storybook/main.ts:14
ERR! export {};
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.m._compile (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/ts-node/src/index.ts:1310:23)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.require.extensions.<computed> [as .ts] (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/ts-node/src/index.ts:1313: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)
ERR!     at interopRequireDefault (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:99:71)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async buildDev (/Users/xxxxxx/Projects/xxxxxx/xxxxxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)

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

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And when I change the module option to commonjs under tsconfig.json everything works fine.

[valentinpalkovic]

In Storybook 7.x (currently in alpha), we have improved the Next.js > v12 support. We are delivering a zero-config experience now. Try now to upgrade to the latest prerelease!

npx sb@next upgrade --prerelease

Closing this for now. Please reopen if the issue is still relevant.

[mateuspiresl]

I have upgraded Storybook, as @valentinpalkovic advised (thanks), and the problem was gone, but another one related to SASS showed up because I had the @storybook/preset-scss addon in my main.js. Removing that addon fixed the new issue.