build-storybook doesn't respect tsconfig.json baseUrl config (Module not found: Error: Can't resolve 'components')

[tsiq-swyx]

Bug or support request summary

I'm honestly not sure if this is a bug or a request for support.

Please provide issue details here - What did you expect to happen? What happened instead?

I know Typescript isn't super well supported with Storybook but I figure I'd just lay out what I have found here.

Basically I have a React component library built in Typescript and viewed with Storybook. The file structure looks something like

ROOT
- .storybook
- src
   - components
     - MyComponent
        - MyComponent.tsx
        - MyComponent.css
        - MyComponent.stories.js
     - index.tsx
   - containers
     - MyContainer
        - MyContainer.tsx
        - MyContainer.css
        - MyContainer.stories.js
     - index.tsx
   - index.tsx
   - index.stories.js
package.json
tsconfig.json
tslint.json
// etc

I want to use absolute importing instead of relative importing, aka if I am importing MyComponent in MyContainer i want to go import {MyComponent} from 'components' instead of import {MyComponent} from '../../../components'.

This is supported in Typescript with the tsconfig.json setting:

{
  "compilerOptions": {
    // redacted
    "rootDir": "src",
    "baseUrl": "src",
    // redacted
  },
}

And this actually does build in tsc. However, it fails to build-storybook.

Project specfics and example error

in Tasks.tsx I have this line:

import { Warning, Spinner } from 'components';

and this is the error I get in my project:

> [email protected] build-storybook /Users/swyx/work/iqos-ui-components
> build-storybook

info @storybook/react v3.3.12
info
info => Loading custom addons config.
info => Loading custom webpack config (full-control mode).
this is the filepath /Users/swyx/work/iqos-ui-components/.storybook
info Building storybook ...
ts-loader: Using [email protected] and /Users/swyx/work/iqos-ui-components/tsconfig.json
ERR! Failed to build the storybook
ERR! Module not found: Error: Can't resolve 'components' in '/Users/swyx/work/iqos-ui-components/src/containers/Tasks'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-storybook: `build-storybook`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build-storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/swyx/.npm/_logs/2018-03-26T15_56_43_853Z-debug.log

So I've done some digging and I think I need to do something with the storybook webpack config but I have no idea what it is. This is my current .storybook/webpack.config.js:

const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
const path = require('path');
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: path.resolve(__dirname, '../src'),
    loader: require.resolve('ts-loader')
  });
  config.plugins.push(new TSDocgenPlugin());
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

I think all this is fine, however ts-loader should probably be resolving according to the rules laid out in tsconfig.json.

things i have tried

I tried adding this line:

config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']

to the webpack config to take advantage of webpack's module resolution but I think that is probably the wrong way to do it because it just starts trying to resolve typescript all over again:

info @storybook/react v3.3.12
info
info => Loading custom addons config.
info => Loading custom webpack config (full-control mode).
lkdjlskjdlskjdljs /Users/swyx/work/iqos-ui-components/.storybook
info Building storybook ...
ts-loader: Using [email protected] and /Users/swyx/work/iqos-ui-components/tsconfig.json
ERR! Failed to build the storybook
ERR! ./node_modules/@storybook/addon-knobs/src/react/index.js
ERR! Module parse failed: Unexpected token (25:9)
ERR! You may need an appropriate loader to handle this file type.
ERR! |   const initialContent = getStory(context);
ERR! |   const props = { context, storyFn: getStory, channel, knobStore, initialContent };
ERR! |   return <WrapStory {...props} />;
ERR! | };
ERR! |
ERR!  @ ./node_modules/@storybook/addon-knobs/dist/register.js 3:13-29
ERR!  @ ./node_modules/@storybook/addon-knobs/register.js
ERR!  @ ./.storybook/addons.js
ERR!  @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/react/dist/client/manager
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-storybook: `build-storybook`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build-storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

So I am stuck. Please help/give ideas on how to resolve this! I will put this in the Storybook Typescript documentation I am writing.

Please specify which version of Storybook and optionally any affected addons that you're running

    "@storybook/addon-actions": "^3.3.12",
    "@storybook/addon-info": "^3.3.12",
    "@storybook/addon-knobs": "^3.3.12",
    "@storybook/addon-links": "^3.3.12",
    "@storybook/addons": "^3.3.12",
    "@storybook/react": "^3.3.12",
    "typescript": "^2.7.1",
    "webpack": "^3.11.0"

[tsiq-swyx]

hey @danielduan this is a react app fwiw but the question itself is more of a typescript + storybook interop question

[danielduan]

My bad, I automatically assumed TS was used in the angular one.

In any case, build-storybook runs a different webpack config and babel config. It might be missing in the extend mode and full control mode.

[tsiq-swyx]

ok that sounds extremely promising. is this "different webpack config and babel config" documented anywhere? I looked thru the docs and basically found nothing about the build process (kinda surprised!)

[felipeleusin]

Have you tried adding https://www.npmjs.com/package/tsconfig-paths-webpack-plugin to your project?

[zhenwenc]

@felipedeboni Thank you so much!! Perfectly solve the issue!

[tsiq-swyx]

@felipeleusin sorry for the delayed response, I only just saw this. I tried it but it doesnt seem to work. I have no idea if its my fault, I don't even know how to debug this thing!

my webpack.config.js:

const path = require('path');
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader')
  });
  defaultConfig.plugins.push(new TSDocgenPlugin());
  defaultConfig.plugins.push(new TsconfigPathsPlugin({})); // this is the plugin
  defaultConfig.resolve.extensions.push('.ts', '.tsx');
  return defaultConfig;
};

my baseUrl is src, so if I did this right I think I should be able to do absolute imports like this:

Can anyone advise how to debug what is going wrong here?

[zhenwenc]

@tsiq-swyx This is my config, it may not be correct, but hope it helps:

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [
      path.resolve(__dirname, '../src'),
      path.resolve(__dirname, '../stories'),
    ],
    loader: require.resolve('ts-loader'),
  });
  config.resolve.plugins = config.resolve.plugins || [];
  config.resolve.plugins.push(
    new TsconfigPathsPlugin({
      configFile: path.resolve(__dirname, '../tsconfig.json'),
    })
  );
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

BTW, as mentioned in the plugin's docs:

Notice that the plugin is placed in the resolve.plugins section of the configuration. tsconfig-paths-webpack-plugin is a resolve plugin and should only be placed in this part of the configuration. Don't confuse this with the plugins array at the root of the webpack configuration object.

And I see you are requiring a Button.css file which is obviously not a TS file, I believe ts-loader is looking for a type definition Button.css.d.ts file, or Button.css.ts file which doesn't really make any sense. Have you tried to use typed-css-modules?

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

[DmitryEfimenko]

+1. it'd be great if it worked out of the box.
I've followed this tutorial: Sexier Imports in TypeScript and it broke my stories

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

[DmitryEfimenko]

This is a big usecase and should stay open till proper fix

[DmitryEfimenko]

by the way, even though label app:react is applicable, this issue is not limited to React. I can see it in Angular app

[DmitryEfimenko]

After digging through the source I have solved this issue.
Apparently, you can provide custom tsconfig.json file under .storybook folder. This is shown in example for angular-cli.
I have provided such file. However, in contrast to the example, mine looks like this:

{
  "extends": "../tsconfig.app.json"
}

In its turn, ../tsconfig.app.json extends root tsconfig.json file where baseDir and other options are provided.
Hope this helps.
I'd recommend making sure that this solves the original issue before closing it. Also worth documenting it.

[igor-dv]

@DmitryEfimenko, adding a custom tsconfig.json in .storybook dir was implemented only for angular, since only angular is working with TS by default.

[DmitryEfimenko]

also, I found out, it does not quite fix the issue. The moment you add some reference to some custom path alias (like @env) in .stories.ts file, the whole thing blows up again

[zhenwenc]

Having custom path alias in TS project is always painful since you have to configure compilerOptions.paths option to make TS compiler be able to resolve the dependencies correctly only in compile time, but also need to configure Babel to transpile the output again to make it work in runtime.

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

[DmitryEfimenko]

this stale bot is very annoying. Issues should be closed just because no work was done and people didn't comment

[igor-dv]

There is a lot of discussions here, but I can't understand the action item.

[DmitryEfimenko]

Here is my use case. I have a mono-repo app generated by Angular CLI 6.0 which has two projects. Here is an approximate structure:

|-package.json
|-tsconfig.json
|-projects
|-|-MyApp
|-|-|-.storybook
|-|-|-src
|-|-|-|-main.ts
|-|-|-|-main.strories.ts
|-|-CoolModule
|-|-|-src
|-|-|-|-service.ts

The tsconfig.json file has this under compilerOptions:

"baseUrl": ".",
"paths": {
  "@app/*": ["projects/MyApp/src/*"],
  "@cool/*": ["projects/CoolModule/src/*"]
}

The main.strories.ts imports something from CoolModule using the custom path I defined:

import { coolService } from '@cool/service'; 

That won't work because storybook won't be able to interpret '@cool/service

[igor-dv]

Ok, now reading this in the 5th time I see you talked before about angular as well. I am closing this one since the initial issue was about React, which doesn't have any angular-cli / TS integration out of the box.

Regarding the paths issue, it was already discussed in #2718 and has workarounds (let's continue there if you still have any problems).

Also, make sure you are working with the latest alpha (4 alpha 10 ATM) which has an integration with angular-cli v6.

[DmitryEfimenko]

I'd think this is not an Angular, but rather TypeScript related issue. Your reference to the other issue is right on though. I'll check if workarounds specified there work. Thanks!

[nickytonline]

The issue you're having is not with Storybook @tsiq-swyx. It is a webpack misconfiguration issue. Aliases also need to be added to the custom TS webpack config in the .storybook folder as well.

e.g. sample tsconfig.json

{
    ...
    "baseUrl": ".",
    "paths": {
      "@types/*": ["types/*"],
      "@helpers/*": ["src/helpers/*"],
      "@services/*": ["src/services/*"],
      "@reducers/*": ["src/reducers/*"],
      "@components/*": ["src/components/*"]
    }
    ...
}

needs to have the corresponding entries in webpack.

e.g. .storybook/webpack.config.ts

{
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      '@types': resolve(__dirname, '../types'),
      '@helpers': resolve(__dirname, '../src', 'helpers'),
      '@services': resolve(__dirname, '../src', 'services'),
      '@reducers': resolve(__dirname, '../src', 'reducers'),
      '@components': resolve(__dirname, '../src', 'components'),
    },
  },
  ...
}

[jwm0]

For some reason it looks like resolve plugins aren't extended. So if you're using TsconfigPathsPlugin to get aliases for TS paths, you will need to redefine them in the storybook webpack config file.

  config.resolve.plugins = [
    new TsconfigPathsPlugin({
      configFile: path.resolve(__dirname, "../tsconfig.json")
    })
  ];

[cristian-spiescu]

In my opinion there is an issue around this line. It should get the modules of the original config as well.

My workaround, in main.js:

const process = require("process");

module.exports = {
// ...
    webpackFinal: (config) => {
        config.resolve.modules.push(process.cwd() + "/node_modules");
        config.resolve.modules.push(process.cwd() + "/src");

        // this is needed for working w/ linked folders
        config.resolve.symlinks = false;
        return config;
    }
};

[ppalmeida]

The solution above from @cristian-spiescu worked for me. It's worth to mention that you must use main.js and not main.ts file extension! It's kinda obvious but yeah, I was distracted and doing .ts in all files inside .storybook folder.

[dwilhel1]

@jwm0 your solution worked for me. Here's my main.js for reference:

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
    'stories': [
        '../src/**/*.stories.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)'
    ],
    'addons': [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-a11y',
        '@storybook/addon-actions',
        '@storybook/addon-storysource',
        'storybook-addon-designs',
    ],
    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.

        // Make whatever fine-grained changes you need

        // Allows importing sass or scss files
        config.module.rules.push({
            test: /\.scss|.sass$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../'),
        });

        config.resolve.plugins = [
            new TsconfigPathsPlugin({
                configFile: path.resolve(__dirname, '../tsconfig.json')
            }),
        ];

        // Return the altered config
        return config;
    },
}

[alitourani]

In my case, the issue was resolved by adding the commands below to main.js:

webpackFinal: (config) => {

     ...

     if (config.resolve.plugins) {
         config.resolve.plugins.push(new TsconfigPathsPlugin());
     } else {
         config.resolve.plugins = [new TsconfigPathsPlugin()];
     }
}

[saidsoualhi]

I'm using angular 11, and still facing the same issue, I tried @dwilhel1 solution but it seems not working for me
is it maybe related to how I'm importing files in my routing module?

here is my tsconfig.json
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "module": "es2020", "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, "target": "es2015", "incremental": true, "typeRoots": [ "node_modules/@types" ], "lib": [ "es2019", "dom" ] } }

and here is an example of imports in my main routing module
import { XXX } from 'src/app/modules/XXX/XXX-routing.module';
import { YYY } from 'src/app/modules/YYY/YYY-routing.module';
import { ZZZ } from 'src/app/modules/ZZZ/ZZZ-routing.module';

main.js file:
const path = require('path'); const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], 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. // Make whatever fine-grained changes you need // Allows importing sass or scss files config.module.rules.push({ test: /\.scss|.sass$/, use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../') }); config.resolve.plugins = [ new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, '../tsconfig.json') }) ]; // Return the altered config return config; } };

[PFight]

I have next folder structure:

Content
 App
  Helpers
     DropdownButton
          DropdownButton.tsx
          DropdownButotn.stories.tsx
     Button.tsx
     Button.stories.tsx

In Button.stories.tsx import App/Helpers/Button works fine, but in DropdownButton.stories.tsx import "App/Helpers/DropdownButton/DropdownButton" does not work. More then that, if I run tsc and near to tsx files appear corresponding js files, then modules found. Solution of cristian-spiescu works.

tsconfig.json:

   "baseUrl": "./Content",

[ErickRodrCodes]

found another solution.

my tsconfig.json looks like this:

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "./src",
    "paths": {
      "@/*": [
        "./*"
      ],
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "scripts/templates/**/*",
    "config/**/*",
    "config-overrides.js",
    "main/**/*"
  ]
}

so if I were to import @/Lib/whatever.scss or @/Component/myComponent the solution you can approach FOR REACT is tu use react-app-rewire-aliases and react-app-rewired to properly resolve the names placed on your custom path definitions:

const rewireAliases = require('react-app-rewire-aliases');
const { paths } = require('react-app-rewired');
const path = require('path');

/* config-overrides.js */

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],
  "webpackFinal": (config, env) => {
      config = rewireAliases.aliasesOptions({
        '@': path.resolve(__dirname, `${paths.appSrc}`)
      })(config, env);
      // config.target = "electron-renderer";
      return config;
  }
}

I commented on the config.target sentence because I need to verify my electron components can be presented properly over the storybook without depending really on it. Hope this helps the react folks.

[ghost]

In my opinion there is an issue around this line. It should get the modules of the original config as well.

My workaround, in main.js:

const process = require("process");

module.exports = {
// ...
    webpackFinal: (config) => {
        config.resolve.modules.push(process.cwd() + "/node_modules");
        config.resolve.modules.push(process.cwd() + "/src");

        // this is needed for working w/ linked folders
        config.resolve.symlinks = false;
        return config;
    }
};

This worked for me. Spent a few days working on it, finally a solution. Thanks @cristian-spiescu.

[pmcelhaney]

I recently upgraded to v6.4.0 and just discovered that I no longer need the work around (a variation of #3291 (comment)). Anyone else see the same? If not I'll go through my git history and report back on what changed that fixed it for me.

[Akifcan]

In my case, the issue was resolved by adding the commands below to main.js:

webpackFinal: (config) => {

     ...

     if (config.resolve.plugins) {
         config.resolve.plugins.push(new TsconfigPathsPlugin());
     } else {
         config.resolve.plugins = [new TsconfigPathsPlugin()];
     }
}

this is fixed my problem also. thank you!!

[aaronadamsCA]

I recently upgraded to v6.4.0 and just discovered that I no longer need the work around (a variation of #3291 (comment)). Anyone else see the same? If not I'll go through my git history and report back on what changed that fixed it for me.

FWIW I'm new to Storybook, v6.4.5, and I still needed TsconfigPathsPlugin to get TypeScript paths to work. Found the workaround here and got everything up and running with it.

[TrieKai]

My workaround, in main.js:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../util/**/*.stories.@(js|jsx|ts|tsx)',
    '../component/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
    '@storybook/addon-viewport'
  ],
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false
      }
    }
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin()
    ]

    return config
  }
}

[akrom123]

My workaround, in main.js:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../util/**/*.stories.@(js|jsx|ts|tsx)',
    '../component/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
    '@storybook/addon-viewport'
  ],
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false
      }
    }
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin()
    ]

    return config
  }
}

it solved my issue, thank you