在react-jsx中使用webpack外部的问题

Question

我尝试将 React v17 与 webpack 外部一起使用，但出现了问题：

react-jsx-runtime.production.min.js:9 Uncaught (in promise) TypeError: Cannot read property 'ReactCurrentOwner' of undefined
    at Object../node_modules/react/cjs/react-jsx-runtime.production.min.js (react-jsx-runtime.production.min.js:9)
    at l (bootstrap:19)
    at Object../node_modules/react/jsx-runtime.js (jsx-runtime.js:4)
    at l (bootstrap:19)
    at load script:2
    at Function.l.a (async module:58)
    at Object../src/index.tsx (load script:2)
    at l (bootstrap:19)
    at startup:4
    at startup:4

我的配置：

// tsconfig.json
{
  "include": ["src/**/*"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true,
    "sourceMap": true,
    "target": "ESNext",
    "types": ["webpack-env"],
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"]
    },
    "allowSyntheticDefaultImports": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ]
  }
}

// webpack.config.js
{
  externalsType: 'script',
  externals: {
    react: ['https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js', 'React'],
    'react-dom': ['https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js', 'ReactDOM'],
  },
}

问题可能是由 tsconfig.compilerOptions.jsx = 'react-jsx' 引起的，但是如何仅使用 'react-jsx' 配置来解决问题呢？

Answer 1

“at Object../node_modules/react/cjs/react-jsx-runtime.Production.min.js (react-jsx-runtime.Production.min.js:9)”的名称是“cjs”。 如果你想通过cdn导入，你应该使用umd。