@emotion/babel-plugin with React 17 and Typescript 4 and webpack does not apply labels

[nicmosc]

Current behavior:

Using the latest version of @emotion/css, @emotion/babel-plugin and react the labels to classnames using the css function do not apply at all (not even the default ones which should be applied in development).

.babelrc

"plugins": [
    "react-hot-loader/babel",
    [
      "@emotion",
      {
        "sourceMap": false,
        "autoLabel": "always",
        "labelFormat": "[filename]__[local]"
      }
    ]
  ],

To reproduce:

Used a custom sandbox to be able to edit the .babelrc file to show the plugin not working
https://codesandbox.io/s/peaceful-volhard-vhdkp?file=/src/index.tsx

Check the index.tsx to see the usage, and the .babelrc config to see the settings configured as per the documentation.

Any setting in the .babelrc, or even when using inline options in the webpack config, nothing changes. Labels are always just the hashes, not even the default [local] is applied.

Expected behavior:

Components with className set to the @emotion/css css value should have labels

Note that it seems to work with Parcel (without TS) https://codesandbox.io/s/react-optional-chaining-demo-forked-ttuv5?file=/package.json

Environment information:

• react version: 17.0.2
• @emotion/css version: 11.1.3
• @emotion/babel-plugin version: 11.2.0
• webpack version: 4.41.2

[iChenLei]

Modify your webpack config, problem will be resovle, but you will encounter other problem in your demo project.
If the same version @emotion/babel-plugin works well on other project, it means your current bundler config is not correct.

// configs/webpack/common.js

- use: ["babel-loader", "awesome-typescript-loader"]
+ use: ["awesome-typescript-loader", "babel-loader"]

btw: awesome-typescript-loder was archived, use ts-loader as alternative
more info: https://webpack.js.org/guides/typescript/#loader

[nicmosc]

@iChenLei could you send me your configuration and list the versions of each tool you're using to get the labels to work? thanks!

[iChenLei]

HI , @nicmosc Nothing special. Just download your codesandbox demo as a zip file , and modify common webpack config.

- use: ["babel-loader", "awesome-typescript-loader"]
+ use: ["awesome-typescript-loader", "babel-loader"]

I strongly recommed you use the latest version of react-webpack-typescript-starter, it works well and i tried it in last night.

Try https://github.com/vikpe/react-webpack-typescript-starter

latest react-webpack-typescript-starter webpack config

    rules: [
      {
        test: [/\.jsx?$/, /\.tsx?$/],
        use: ["babel-loader"],   👈🏻  // use single babel-loader to process jsx and tsx file.
        exclude: /node_modules/,
      },

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"  👈🏻  // use this way
  ],

Any way, use the lastest recommend config is the best choise, it save life and time!

[nicmosc]

@iChenLei so it seems to be an issue with ts-loader (using awesome-typescript-loader seems to keep the labels). Still that's not a proper alternative as with ts-loader you get build-time type checking, without having to fiddle with other packages to achieve the same with awesome-typescript-loader.
I'll try to investigate further and come back to you if i find something

[iChenLei]

Sorry I don't know that you care about build-time type checking. Yep, awesome-typescript-loader can work as well. In my solution you just need try to change the loader config order. [ 'babel-loader', 'awesome-typescript-loader' ] to [ 'awesome-typescript-loader' , 'babel-loader'] , I have no time to digest the deep reason why we need do it, but I assured that emotion's add label action is work at nodejs side, the babel plugin running order is important. I can't give u more info about it cause i am not a babel expert. 😄 @nicmosc

[nicmosc]

Ok found the issue: in the tsconfig.json the jsx field was set to react meaning all <div /> would get converted to React.createElement and thus emotion could not find where to attach the label. (see #1748)

For anyone bumping into this and having issues with getting the compilation going with babel-loader and ts-loader here is what i have in my babel config:

module.exports = {
  presets: [
    ['@babel/preset-env', { useBuiltIns: 'usage', corejs: { version: 3 } }],
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
  plugins: [
    ['@emotion/babel-plugin', {
      sourceMap: true,
      autoLabel: 'always',
      labelFormat: '[filename]__[local]',
    }],
  ],
}

The automatic is needed otherwise the react babel preset failed to compile (see gatsbyjs/gatsby#27694).

✌️