目录
1、npm start后一直处于Starting the development server...状态
1、npm start后一直处于Starting the development server...状态
原因:杀毒软件(电脑管家等)拦截了脚本
解决方法:将C:\WINDOws\System32\WindowsPowerShel\v1.0\powershell.exe添加到电脑管家的信任区中。再重新npm start,即可。
2、引入less-loader文件后报错:
2.1 问题
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
-options has an unknown property 'less-loader'. These properties are valid:
object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }
网上说是 less-loader版本问题:版本过低
卸载less-loader然后重装
// 卸载
npm uninstall less-loader
// 安装
npm install less-loader@版本号 --save-dev
但是这个方法没有解决我的问题。
后来我卸载了less和less-loader,再安装它们,问题解决,但是不知道是什么原因。
npm install --save-dev less less-loader
2.2 less-loader配置:
webpack.config.json文件:修改两处
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 此处新增less配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
/** 此处新增less-loader配置
* config less
*/
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
3、路由配置无效
如果在配置路由的时候会用到以下代码
import {HashRouter as Router, Route, Switch} from "react-router-dom"
会报错:export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
网上查阅资料,得知原因是:'Switch' 是react-router 5版本的接口,而最新版本是
"react-router-dom": "^6.2.1",并且已经将Switch改为Routes
解决方法1:将代码中所有的Switch该为Routes。该方法之后不再报错,但是路由不起效果。
解决方法2:卸载当前版本路由,安装5版本。重新运行,不再报错,路由也有效果。
// 卸载
npm uninstall react-router-dom
// 安装
npm install react-router-dom@5
4、安装轮播组件报错
npm install --save react-swipeable-views
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: reactcity@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.3.0 || ^16.0.0 || ^17.0.0" from react-swipeable-views@0.14.0
npm ERR! node_modules/react-swipeable-views
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\wlkj\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! C:\Users\wlkj\AppData\Local\npm-cache\_logs\2022-04-10T11_31_55_495Z-debug-0.log
原因:当前react的版本是18,但是react-swipeable-views需要15、16、17版本
解决方法:卸载当前react,下载匹配版本。
修改为package.json中的"react": "^17.0.0"和"react-react": "^17.0.0"。
注意:修改完后需要删除node_modules,再npm install