使用新的JSX转换汇总React 17-“未定义React”

Question

我正在尝试用汇总和几个CreateReact应用程序原型一个微前端架构。但是，当我在本地将我的外部应用程序链接到容器应用程序时，我遇到以下错误：

React未定义

23500 |返回/纯/反应。createElement（“div”，{^23501 | id:“container”，23502 | className:“flex-flex col h-screen”23503 |}，/#PURE/React.createElement（BrowserRouter，null，/#PURE/React.createElement（标头{

我认为这是因为我们没有在每个组件/文件的顶部导入React，因为React 17的新JSX转换允许您不必这样做。我真的希望能够构建我们的微型前端包，而不必在每个文件中导入React，有没有办法做到这一点？

这是汇总表。配置。js:

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from '@rollup/plugin-node-resolve';
import image from '@rollup/plugin-image';
import visualizer from 'rollup-plugin-visualizer';
import includePaths from 'rollup-plugin-includepaths';
import replace from '@rollup/plugin-replace';
import pkg from './package.json';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default {
  input: './src/App.jsx',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'esm',
    },
  ],
  plugins: [
    external(),
    postcss(),
    resolve({
      mainFields: ['module', 'main', 'jsnext:main', 'browser'],
      extensions,
    }),
    image(),
    visualizer(),
    includePaths({ paths: ['./'] }),
    replace({
      'process.env.NODE_ENV': JSON.stringify('development'),
    }),
    babel({
      exclude: 'node_modules/**',
      plugins: [
        [
          'module-resolver',
          {
            root: ['src'],
          },
        ],
      ],
      presets: ['@babel/preset-react'],
    }),
    commonjs(),
  ],
};

Answer 1

我仍然有这个问题，但我必须指定namedExports

      pluginCommonjs({
        include: /node_modules/,
        namedExports: {
          'react/index.js': ['Component', 'PureComponent', 'Fragment', 'Children', 'createElement'],
          'react/jsx-runtime': ['jsx', 'jsxs', 'Fragment'],
          'react/jsx-dev-runtime': ['jsx', 'jsxs', 'jsxDEV']
        }
      }),
    

Answer 2

通过将{runtime:“automatic”}添加到@babel/preset react预设中，修复了此问题。

从预设反应运行时文档：

automaticauto导入JSX传输到的函数<代码>经典不会自动导入任何内容。

在React帖子中也提到了新的JSX转换：

目前，旧的转换{运行时：经典}是默认选项。要启用新转换，您可以将{运行时：自动}作为选项传递到@Babel/plugin-transver-react-jsx或@Babel/preset-react-jsx

这里有一个例子：

{
    // ...
    plugins: [
        // ...
        babel({
            // ...
            presets: [
                // ...
                ["@babel/preset-react", { runtime: "automatic" }],
            ]
        })
    ]
}

Answer 3

在tsconfig中。json，添加以下代码

{
  "compilerOptions": {
    "jsx": "react-jsx",
  }
}