@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;
    },
}

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;
    }
};

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'),
    },
  },
  ...
}

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

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.

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")
    })
  ];

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

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
  }
}

@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?

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.

+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

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()];
     }
}

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

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.

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.

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.