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

Created on 16 Jan 2019 · 17Comments · Source: storybookjs/storybook

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.

babel / webpack compatibility with other tools has workaround inactive

Source

meebix

👍6 ❤1

Most helpful comment

Any updates on this? I'm getting the same problem and not sure how to solve

ximbong91023 on 23 Oct 2019

👍4

All 17 comments

config.module.rules.push({
test: /.(js|jsx)$/,
exclude:<>,
loader: require.resolve("babel-loader")
});

piyush96arora1 on 16 Jan 2019

👎1

test: /.(ts|tsx)$/,
include :path to src
require.resolve("ts-loader")

test: /.scss$/,
require.resolve("style-loader"),
require.resolve("css-loader"),
require.resolve("sass-loader")

piyush96arora1 on 16 Jan 2019

👎1

What? Are you suggesting to add rules for TS and JS?

meebix on 18 Jan 2019

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          plugins: [require.resolve('babel-plugin-emotion')],
        },
      },
      {
        loader: require.resolve('ts-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

Still not working.

meebix on 18 Jan 2019

  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [path.resolve(__dirname, "../src"), path.resolve(__dirname, "../stories")],
    loader: require.resolve("ts-loader")
  });

  defaultConfig.module.rules.push({
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: require.resolve("babel-loader")
  });

piyush96arora1 on 29 Jan 2019

👎1

This does not work either. ^^

meebix on 7 Feb 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 28 Feb 2019

stale[bot] on 21 Mar 2019

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!

stale[bot] on 20 Apr 2019

😕6 👎1

Any updates on this? I'm getting the same problem and not sure how to solve

ximbong91023 on 23 Oct 2019

👍4

Also having this problem if anyone has a solution. @meebix ?

kennycrosby on 25 Mar 2020

👍1

Having this issue too, can we re-open please?

Did anyone find a solution @meebix? @ximbong91023 @kennycrosby

MarkLyck on 13 May 2020

👍2

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

MarkLyck on 13 May 2020

👍1

PSA: Upvoting the original issue description is the most effective way to get it solved. Upvoting comments below is also great, but won't help us prioritize the feature/fix

shilman on 15 May 2020

❤1

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