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

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:

> iqos-ui-components@0.1.0 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 typescript@2.7.1 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! iqos-ui-components@0.1.0 build-storybook: `build-storybook`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the iqos-ui-components@0.1.0 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 typescript@2.7.1 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! iqos-ui-components@0.1.0 build-storybook: `build-storybook`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the iqos-ui-components@0.1.0 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"

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

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