storybook: use awesome-typescript-loader

Question

By default Storybook uses babel-loader, but the current version of babel-loader is incompatible to the one Storybook requires. So I decided to use awesome-typescript-loader instead. That is, my project uses babel-loader and Storybook uses awesome-typescript-loader.

I added the webpack.config.js file:

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

but Storybook still insist to load babel-loader.

ERR! Error: Cannot find module 'babel-loader'

How can I set up an alternative loader?

Answer 1

Try with @next version, there was a fix 5 days ago that solves it by skipping babel loader check.

This is how to run the init command with the @next version:

npx -p @storybook/cli@next sb init

Additionally, if you haven't already, clean up babel-loader from package.json, remove npm lock file, and re-run npm install.

Be aware @next is not the stable version, and this is not completely ideal, but if you are interested keep following the conversation