React-在项目中遇到的问题

问题： React is not defined

• 前提：是没有用到React但项目一定要引入，不引入就报错

• 解决方法： 以下四种方法
  • 1.在项目顶部导入import React from "react" ===> 多余
  • 2.在React 17 版本中可以在.babelrc中添加 ===> 亲测有效，但需要重新构建几次

    {
      "presets": [
        "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}] // 关键
      ]
    }
    -- 第一遍构建后，无效，把webpack.config.json中也添加了类似代码，
    {
    	test: /\.(ts|tsx)$/,
    	use: {
    		loader: 'babel-loader',
    		options: {
    			presets: [
    				['@babel/preset-react', { runtime: 'automatic' }],
    				'@babel/preset-typescript',
    			],
    		},
    	},
    }
    -- 第二遍构建有效

  • 3.在package.json 中添加

    // package.json
    {
      "babel": {
        "presets": [
          [
            "react-app", // 换成对应的插件
            {
              "runtime": "automatic"
            }
          ]
        ]
      }
    }

  • 4.在webpack.config.json中添加

    // webpack.config.js
    {
      loader: require.resolve('babel-loader'),
      options: {
        customize: require.resolve(
          'babel-preset-react-app/webpack-overrides'
        ),
        // Add this back
        presets: [
          [
            require.resolve('babel-preset-react-app'),
            {
              runtime: hasJsxRuntime ? 'automatic' : 'classic',
            },
          ],
        ],
      }
    }