Storybook can't process TS files outside of the project

Question

I have noticed that Storybook can't process Typescript files if they are from another project (monorepo), but it is doing okay with TS files that are within its project. How do I configure Storybook to handle TS files outside the project?

Structure of the monorepo:

package1
    .storybook
        main.ts
        preview.ts
    component.tsx (this component imports file.ts)
    component.stories.tsx
package2
    file.ts <- (Storybook can't process this file: ModuleParseError: Module parse failed: Unexpected token)

Here is the main.ts config file:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
const toPath = (filePath) => path.join(process.cwd(), filePath);

module.exports = {
  "stories": [
    "../src/**/*.stories.@(mdx|js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-knobs/register",
    "@storybook/preset-create-react-app",
    "@storybook/addon-a11y",
    'storybook-addon-styled-component-theme/dist/preset',
    'storybook-addon-themes',
    "storybook-dark-mode",
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5",
    "disableTelemetry": true,
  },
  features: {
    emotionAlias: false,
  },
  typescript: { reactDocgen: false },
  webpackFinal: async (config, { configType }) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/core': toPath('node_modules/@emotion/react'),
          'emotion-theming': toPath('node_modules/@emotion/react'),
        },
        plugins: [new TsconfigPathsPlugin()]
      },
    }
  }
}

Here is the error:

ModuleParseError: Module parse failed: Unexpected token (7:11)
File was processed with these loaders:
 * ../../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { Palette as palette } from '../Palette';
| 
> const Paper: any = [
|     {

If I import the same TS file, but manually precompiled into regular JS - Storybook works.

I have no idea what to try to solve this :(

Answer 1

I've had the same issue and it's pretty arcane. I setup my monorepo with pnpm workspaces and had a package like you where you have your storybook, just like you the parsing of typescript stories & components worked well inside of the storybook package, but when importing stories from other packages it failed to parse typescript.

In my install I'm running storybook 7.0.0-rc.8, I think this fix would work for versions below 7 as well.

Fix: When storybook bootstraps it creates a .babelrc file beside the .storybook directory (if you tell the init script to do so).

All that was needed for me to get it working was to rename that file to babel.config.json (no change of content, just renaming the file).

The contents of my babel.config.json file:

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
         "targets": {
           "chrome": 100
         }
      }
  ],
  "@babel/preset-typescript",
  "@babel/preset-react"
  ],
  "plugins": []
}

Answer 2

Add this to .storybook/main.js

webpackFinal: async (config, { configType }) => {
  // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Storybook uses its own webpack config, so we need to merge our config with it
  // See https://storybook.js.org/docs/configurations/custom-webpack-config/

  // Add typescript loader to process TS-files from other packages
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("ts-loader"),
        options: {
          reportFiles: [
            "../**/src/**/*.{ts,tsx}"
          ]
        }
      },
    ]
  });

  config.resolve.extensions.push(".ts", ".tsx");

  return config;
}