profile
viewpoint

Ask questionsHow 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.

// 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.

emotion-js/emotion

Answer questions ConnorNumberOne

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

useful!

Related questions

Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 2
Component selectors not working with `@emotion/babel-preset-css-prop` hot 2
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Using emotion 9 and 10 in the same window hot 1
Emotion 10 - "React is not defined" hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
&:focus not working hot 1
regexp not work in IE hot 1
transpile typescript to babel-plugin-emotion doesn't work hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Github User Rank List