【react】解决babel-preset-react-app报错

最新推荐文章于 2024-11-04 00:05:12 发布

原创最新推荐文章于 2024-11-04 00:05:12 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

18 篇文章

订阅专栏

文章讲述了在配置babel-preset-react-app时遇到的错误，指出必须设置NODE_ENV或BABEL_ENV环境变量。方式一介绍了关闭和开启不同环境编译的后果，可能影响到开发时的警告和props检验。方式二涉及删除eslintConfig来改变生产环境检查。

报错：
Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables. Valid values are “development”, “test”, and “production”. Instead, received: undefined.
方式一：

弊端：开发时，一些报错、警告会受影响，如props检验警告，不能再控制台打印；

// package.json 
"babel": {
    "presets": [
      [
        "babel-preset-react-app",//关闭使用开发环境
        false
      ],
      [
        "babel-preset-react-app/prod",//开启使用生产环境编译
        {
          "runtime": "automatic"// 可以不用单独在组件中引入React
        }
      ]
    ]
  }

方式二：直接删除eslintConfig

// package.json 
-  "eslintConfig": {
-    "extends": [
-      "react-app/prod",//开启生产环境检查
-      "react-app/jest"
-    ]
-  },
// "browserslist":{
 "babel": {
  "presets": [
    [
      "babel-preset-react-app"
    ]
  ]
}