babel-plugin-emotion not working after upgrading to 10

I upgraded from Emotion 9 to 10, and it seems like the babel plugin is now ignored. I’ve pinpointed the issue to the babel plugin version. If I keep Emotion at 10, and just revert the babel plugin back to 9.2.11, I will be able to see class labels in development again.

I don’t know how to reproduce this, but when testing different git commits I was definitely able to pinpoint it to just upgrading the babel plugin from 9.2.11 to 10.0.5. I even tried using earlier versions of the 10 plugin (10.0.0 - 10.0.4) to no avail.

Is there any way I can debug it better, to provide you with more info?

Relevent code:

webpack:

 {
        test: /\.(js|tsx|ts)$/,
        exclude: /(node_modules)/,
        use: [{
          loader: 'babel-loader',
          options: { babelrc: true }
        },
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: process.env.NODE_ENV !== 'production',
            getCustomTransformers: () => ({
              before: [tsTransformAsyncToMobxFlow()]
            })
          }
        }
        ]
      },

babelrc:

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    ["import", { "libraryName": "antd", "style": true }]
  ],
  "env": {
    "langs": {
      "plugins": [
        "@babel/plugin-transform-modules-commonjs"
      ]
    },
    "development": {
      "plugins": [
        ["@babel/plugin-transform-react-display-name"],
        ["emotion", { "sourceMap": true, "autoLabel": true }]
      ]
    
    },
    "production": {
      "comments": false,
      "plugins": [
        "@babel/plugin-transform-react-constant-elements",
        "@babel/plugin-transform-react-inline-elements",
        "transform-react-remove-prop-types",
        ["emotion"]
      ]
    }
  }
}

tsconfig:

{
 "compilerOptions": {
  "pretty": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "outDir": "./typescript-build",
  "suppressImplicitAnyIndexErrors": true,
  "moduleResolution": "node",
  "jsx": "react",
  "module": "esnext",
  "noImplicitAny": true,
  "preserveConstEnums": true,
  "removeComments": true,
  "target": "esnext",
  "sourceMap": true,
  "allowSyntheticDefaultImports": true,
  "experimentalDecorators": true,
  "baseUrl": ".",
  "paths": {
    "~dpStores/*": ["src/stores/*"],
    "~dpTooltip": ["src/shared/components/tooltip.tsx"],
    "~dpEmotion": ["src/shared/themes/emotion.tsx"]
  }
 },
 "exclude": [
  "node_modules"
 ],
 "plugins": [
  {
      "name": "tslint-language-service",
      "alwaysShowRuleFailuresAsWarnings": false,
      "ignoreDefinitionFiles": true
  },
  {
    "name": "typescript-styled-plugin"
  },
  { "transform": "ts-transform-async-to-mobx-flow", "type": "config" }
  ]
}

[ferdaber]

@tkh44 I was able to work around this issue by placing the preset last in the order, because babel’s preset follow a function composition order (last to first): https://babeljs.io/docs/en/presets#preset-ordering

[aaronjensen]

afaict, @babel/plugin-transform-react-inline-elements is incompatible with emotion 10.