How to use babel-emotion-plugin with Storybook + Typescript?

I am currently using Storybook (v.4.0.12) with TypeScript and have successfully followed the instructions to set up my TypeScript webpack.config.js. This works fine.

However, I cannot seem to find any way of successfully adding a babel plugin to the config. My latest attempt is below, which does not work.

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          babelOptions: {
            babelrc: false,
            presets: [],
            plugins: ['emotion'],
          },
        },
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

If I boot Storybook with this config, I continue to see the message Component selectors can only be used in conjunction with babel-plugin-emotion., which means that the Emotion babel plugin is not being picked up by Storybook.

I am not using CRA, just plain ol’ React and Typescript.

Any suggestions?

Thanks.

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[Elfo404]

@MarkLyck crossposting it here from SO so other people might find it as well.

I don’t know if it applies to everyone, but in my case I got it working with storybook 5.3.x by using in .storybook/main.js this:

module.exports = {
  stories: ['../packages/**/*.stories.tsx'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        plugins: ['emotion'],
        presets: [['react-app', { flow: false, typescript: true }]],
      },
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

This doesn’t use TypeScript tho, so might or might not be relevant in this situation, or might just be used while a solution using TypeScript is found.

Hope it helps.