react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容等問(wèn)題及解決
react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容問(wèn)題
由于開發(fā)環(huán)境和項(xiàng)目版本的兼容問(wèn)題,嘗試升級(jí)了react-scripts后,一大堆問(wèn)題接踵而至,翻遍了百度和csdn,往往解決了舊的又出現(xiàn)新的,或者開發(fā)沒問(wèn)題而打包時(shí)報(bào)錯(cuò),現(xiàn)羅列一下遇到的主要問(wèn)題和最終解決方案,以供參考。
遇到問(wèn)題
digital envelope routines::unsupported
命令行運(yùn)行 $env:NODE_OPTIONS=“–openssl-legacy-provider” ,再次啟動(dòng)即可
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 ? ? ? ? } ? ? ? ] ? ? ] ?},
必要時(shí)安裝依賴:“@babel/eslint-parser”
注:
babel-eslint 自 2020 年 3 月起已被棄用。 該軟件包已遷移到新的倉(cāng)庫(kù),如有需要請(qǐng)查閱 ‘@babel/eslint-parser’
react運(yùn)行報(bào)錯(cuò)TypeError
報(bào)錯(cuò):TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string.
在同事幫忙下已解決,
現(xiàn)記錄一下思路
頁(yè)面 / 控制臺(tái)報(bào)錯(cuò)
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)
……
根據(jù)提示,看出問(wèn)題是在react-dev-utils下面的noopServiceWorkerMiddleware里,
全局搜索‘"react-dev-utils"’,注意有雙引號(hào),找到node_modules/react-scripts/package.json文件中的"react-dev-utils": "^10.0.0",這一行。
考慮到可能是沒有鎖定版本,最近有包有更新后造成bug的可能,所以去掉尖角號(hào)^,
然后 清除緩存并重新安裝依賴
npm cache clean --force npm install
再運(yùn)行時(shí)項(xiàng)目就跑起來(lái)了。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
React Native自定義標(biāo)題欄組件的實(shí)現(xiàn)方法
今天講一下如何實(shí)現(xiàn)自定義標(biāo)題欄組件,我們都知道RN有一個(gè)優(yōu)點(diǎn)就是可以組件化,在需要使用該組件的地方直接引用并傳遞一些參數(shù)就可以了,這種方式確實(shí)提高了開發(fā)效率。對(duì)React Native自定義標(biāo)題欄組件的實(shí)現(xiàn)方法感興趣的朋友參考下2017-01-01D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖 (V3版本)
這篇文章主要介紹了D3.js(v3)+react 制作 一個(gè)帶坐標(biāo)與比例尺的柱形圖 (V3版本) ,本文通過(guò)實(shí)例代碼文字相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-05-05React組件實(shí)例三大核心屬性State props Refs詳解
組件實(shí)例的三大核心屬性是:State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問(wèn)不到 this,也就不存在組件實(shí)例這種說(shuō)法,但由于它的特殊性(函數(shù)可以接收參數(shù)),所以存在Props這種屬性2022-12-12React操作真實(shí)DOM實(shí)現(xiàn)動(dòng)態(tài)吸底部的示例
本篇文章主要介紹了React操作真實(shí)DOM實(shí)現(xiàn)動(dòng)態(tài)吸底部的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10