react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

目录
  • react项目升级报错,babel报错,.babelrc配置兼容问题
    • 遇到问题
    • 最终解决方案
  • react运行报错TypeError
    • 现记录一下思路

react项目升级报错,babel报错,.babelrc配置兼容问题

由于开发环境和项目版本的兼容问题，尝试升级了react-scripts后，一大堆问题接踵而至，翻遍了百度和csdn，往往解决了旧的又出现新的，或者开发没问题而打包时报错，现罗列一下遇到的主要问题和最终解决方案，以供参考。

遇到问题

digital envelope routines::unsupported

命令行运行 $env:NODE_OPTIONS=“–openssl-legacy-provider” ，再次启动即可

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “decorators-legacy”, “decorators”.

require() of ES Module ……is not supported.

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “decorators-legacy”, “decorators”.

[eslint] The “path” argument must be of type string. Received an instance of Array

[eslint] ESLint configuration in .eslintrc is invalid:
- Unexpected top-level property “babel”.

最终解决方案

删掉根目录下的.babelrc文件，在package.json中配置：

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
 },

必要时安装依赖：“@babel/eslint-parser”

注：

babel-eslint 自 2020 年 3 月起已被弃用。 该软件包已迁移到新的仓库，如有需要请查阅 ‘@babel/eslint-parser’

react运行报错TypeError

报错：TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string.

在同事帮忙下已解决，

现记录一下思路

页面 / 控制台报错

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

at validateString (internal/validators.js:117:11)

at Object.join (path.js:375:7)

at noopServiceWorkerMiddleware (D:\git\healthyWashing\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)

……

根据提示，看出问题是在react-dev-utils下面的noopServiceWorkerMiddleware里，

全局搜索‘"react-dev-utils"’，注意有双引号，找到node_modules/react-scripts/package.json文件中的"react-dev-utils": "^10.0.0",这一行。

考虑到可能是没有锁定版本，最近有包有更新后造成bug的可能，所以去掉尖角号^，

然后 清除缓存并重新安装依赖

npm cache clean --force
npm install

再运行时项目就跑起来了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • create-react-app常用自定义配置教程示例

    create-react-app常用自定义配置教程示例

    目录 引言 yarn安装依赖包报错 IE10下报错, Map 未定义 webpack添加 alias 解决跨域,反向代理配置 项目主要文件路径配置 关闭自动开启浏览器配置 修改 webpack output.publicPath 生产环境关闭 sourcemap eslint 配置 装饰器 Decorators 配置 区分环境 编译进度条配置 打包开启 gzip 压缩 生成 report.html 可视化打包分析 引入 antd 1.直接引入,样式直接用编译后的antd.css 2.引入 les

  • react组件从搭建脚手架到在npm发布的步骤实现

    最近公司给公司里架设了私有的npm仓库,相应地也需要一个用来发布react组件用的脚手架,在这个过程中又又又又复习了一下webpack,在这里分享下脚手架搭建的过程. 首先,我们预期的脚手架具有如下功能 开发组件时可以实时预览 对组件各种资源进行打包(js/css/图片等) 一键打包发布 1.创建项目 脚手架的名字暂时取react-simple-component-boilerplate. 首先创建一个新目录用于放我们的文件: mkdir react-simple-component-boile

  • 详解超简单的react服务器渲染(ssr)入坑指南

    前言 本文是基于react ssr的入门教程,在实际项目中使用还需要做更多的配置和优化,比较适合第一次尝试react ssr的小伙伴们.技术涉及到 koa2 + react,案例使用create-react-app创建 SSR 介绍 Server Slide Rendering,缩写为 ssr 即服务器端渲染,这个要从SEO说起,目前react单页应用HTML代码是下面这样的 <!DOCTYPE html> <html lang="en"> <head&g

  • react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    目录 react项目升级报错,babel报错,.babelrc配置兼容问题 遇到问题 最终解决方案 react运行报错TypeError 现记录一下思路 react项目升级报错,babel报错,.babelrc配置兼容问题 由于开发环境和项目版本的兼容问题,尝试升级了react-scripts后,一大堆问题接踵而至,翻遍了百度和csdn,往往解决了旧的又出现新的,或者开发没问题而打包时报错,现罗列一下遇到的主要问题和最终解决方案,以供参考. 遇到问题 digital envelope routi

  • vue或react项目生产环境去掉console.log的操作

    在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的: 首先安装terser-webpack-plugin npm install terser-webpack-plugin -D 然后在vue.config.js文件里写插件的配置: module.exports = { configureW

  • VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    问题现象 项目使用vue/cli3脚手架搭建的前端项目,vue版本为2.6.10. browserslist的配置如下: [ "> 1%", "last 2 versions"] 但开发环境的IE11打开显示白屏,F12打开显示: 分析过程 5306行显示 "./node_modules/_debug@4.1.1@debug/src/browser.js"这个路径报错,由于eval()包含的代码中有ES6的语法,IE不支持,查了网上很多资料

  • 在Web项目中引入Jquery插件报错的完美解决方案(图解)

    在Web项目中引入Jquery插件报错的完美解决方案(图解)

    在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方案如下所示: 1.在MyEclipse软件中找打-----windows----preferences,会出现一个如下图所示的界面: 2.在检索框输入一个validation----单击该validation节点,将对于JavaScript脚本的验证取消勾,然后点击Apply,一直yes就行. 3.

  • 解决vue项目,npm run build后,报路径错的问题

    在build目录下的webpack.prod.conf.js里面: output: { path: config.build.assetsRoot, publicPath: "/dist/", // 添加这行代码,可解决该问题或者publicPath: "./",也可解决 filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[

  • spring boot项目导入依赖后代码报错问题的解决方法

    代码截图如图所示(由于本人问题已经解决,没来得及截图,所以在网上找了一张图片) ​ 针对图中所示的情况,可参考一下解决方案: 方案一: 在 Idea 导入 Spring Boot 项目代码报红,试过更改maven配置,maven clean操作,执行-U idea:idea等命令还是提示:cannot resolve symbol 'SpringBootApplication' .我最终解决方法是导入要导入项目的pom.xml文件,而不是导入现有项目解决.选择pom.xml后会弹出提示框,选择a

  • 解决vue项目运行npm run serve报错的问题

    先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 :%SystemRoot%\system32;一定要注意分号, 然后在path环境中配置C:\Windows\System32 最后去项目安装依赖 npm i 运行项目 npm run serve 如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了 补充知识:vue

  • 详解vue-cli项目在IE浏览器打开报错解决方法

    详解vue-cli项目在IE浏览器打开报错解决方法

    首先要知道VUE官网已表明仅支持IE8以上版本(不包括IE8),css弹性布局flex各浏览器支持如下: 假如项目用到弹性布局,则项目仅支持IE10以上版本. 另外兼容其他低版本的,请另寻它法. 网上说的本人试了都是没用的,下面是亲自试验的解决方法. 1. 问题 :ie浏览器打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser; 解决方法: 安装babel-polyfill npm install babel-po

  • React hook 'useState' is called conditionally报错解决

    目录 总览 顶层调用 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditionally"错误.为了解决该错误,将所有React钩子移到任何可能油返回值的条件之上. 这里有个例子用来展示错误是如何发生的. import React, {useState} from 'react'; export default function App() { const [count,

  • flutter升级3.7.3报错Unable to find bundled Java version解决

    目录 引言 升级过程很顺利,一跑应用傻眼了,报错! build gradle 指定 compileSdkVersion 33报错 引言 Android studio 是2020 年的版本,有点老,昨天突发想法,升级到了 Android Studio Electric Eel 2022.1. 计划今天和明天写那个 Flutter WebView 优化的文章,这篇是 在 Flutter 中使用 webview_flutter 4.0 | js 交互 的续集.早上起来,发现 Flutter 有新版本了

随机推荐