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

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

[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 https://github.com/emotion-js/emotion/issues/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 https://github.com/gatsbyjs/gatsby/issues/27694).

✌️

[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