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

[meebix]

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.

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

  return config;
};

// Attempt 2
module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader'),
      },
      {
        loader: require.resolve('ts-loader'),
      },
    ],
  });
  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.

[JenniferMcIntyre-xyz]

@meebix how were you able to solve this? I think I am going through the same thing.

[MarkLyck]

@meebix please share your solution,
@ConnorNumberOne were you able to solve it?

having the exact same issue.

[MarkLyck]

I reposted the question on SO: https://stackoverflow.com/questions/61781954/how-to-use-babel-emotion-plugin-with-storybook-typescript