profile
viewpoint

Ask questionsbuild-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"
storybookjs/storybook

Answer questions 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")
    })
  ];
useful!
source:https://uonfu.com/
Github User Rank List