styled-jsx (version 3.4.4) was used in Antd Pro appear "ReferenceError: _JSXStyle is not defined"

[rayhomie]

Do you want to request a feature or report a bug?

bug

ReferenceError: _JSXStyle is not defined

export default {
  plugins: [
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: {
          hmr: true,
        },
        targets: {
          ie: 11,
        },
        locale: {
          enable: true, 
          default: 'zh-CN', 
          baseNavigator: true, 
        },
        dynamicImport: {
          loadingComponent: './components/PageLoading/index',
        },
      },
    ],
    [
      'umi-plugin-pro-block',
      {
        moveMock: false,
        moveService: false,
        modifyRequest: true,
        autoAddMenu: true,
      },
    ],
  ],
  targets: {
    ie: 11,
  },
  routes: routerConfig,
  disableRedirectHoist: true,
  define: {
    APP_TYPE: process.env.APP_TYPE || '',
  },
  publicPath: CDN ? '/': '/',
  // Theme for antd
  // https://ant.design/docs/react/customize-theme-cn
  theme: {
    'primary-color': primaryColor,
  },
  externals: {
    '@antv/data-set': 'DataSet',
  },
  extraBabelPlugins: ['styled-jsx/babel'],//******************************there is config**************************************
  ignoreMomentLocale: true,
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
  cssLoaderOptions: {
    loader: 'typings-for-css-modules-loader',
    options: {
      modules: true,
      namedExport: true,
      camelCase: true,
      less: true,
    },
  },
  disableCSSModules: false,
  proxy: proxyConfig,
  hash: true,
}

use css in jsx

  <div className="md-empty">
        <Spin />
        <style jsx>
          {`
            .md-empty {
              text-align: center;
              padding: 250px 0 0;
            }
          `}
        </style>
      </div>

What is the expected behavior?

I hope it can render normally

Environment (include versions)

• OS:macOS Big Sur version 11.0.1
• Browser: google chrome version 90.0.4430.212（official version） (x86_64)
• styled-jsx (version):3.4.4
• node v14.17.3

Did this work in previous versions?

styled-jsx can be used normally in version 3.2.1

[rayhomie]

I guess dependencies have problem

 "dependencies": {
    "ant-design-pro": "^2.3.2",
    "antd": "^3.26.16",
    "archiver": "^3.1.1",
    "classnames": "^2.2.6",
    "dva": "^2.6.0-beta.6",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.15",
    "lodash-decorators": "^6.0.0",
    "memoize-one": "^4.0.0",
    "moment": "^2.22.2",
    "path-to-regexp": "^2.4.0",
    "prop-types": "^15.5.10",
    "qs": "^6.9.1",
    "rc-animate": "^2.4.4",
    "react": "^16.8.6",
    "react-container-query": "^0.11.0",
    "react-dnd": "^10.0.2",
    "react-dnd-html5-backend": "^10.0.2",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.8.6",
    "react-media": "^1.8.0",
    "store": "^2.0.12",
    "umi-request": "^1.0.0"
  },
  "devDependencies": {
    "@styled-jsx/plugin-sass": "^4.0.0",
    "@types/qs": "^6.9.3",
    "@types/react": "^16.8.24",
    "@umijs/hooks": "^1.9.3",
    "ali-oss": "^6.1.1",
    "axios": "^0.19.1",
    "babel-eslint": "^10.0.2",
    "co": "^4.6.0",
    "cross-env": "^5.1.1",
    "cross-port-killer": "^1.0.1",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^6.0.0",
    "husky": "^1.2.0",
    "lint-staged": "^8.1.0",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^1.18.2",
    "styled-jsx": "^3.4.4",
    "stylelint": "^9.8.0",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-standard": "^18.0.0",
    "typings-for-css-modules-loader": "^1.7.0",
    "umi": "^2.8.3",
    "umi-plugin-pro-block": "^1.2.0",
    "umi-plugin-react": "^1.9.1"
  },

[rayhomie]

 <style jsx>
  {`
     .md-empty {
          text-align: center;
          padding: 250px 0 0;
      }
  `}
</style>

add import JSXStyle where use

import _JSXStyle from 'styled-jsx/style'