react项目中遇到的小问题：

目录

1、npm start后一直处于Starting the development server...状态

2、引入less-loader文件后报错：

2.1 问题

2.2 less-loader配置：

3、路由配置无效

4、安装轮播组件报错

---

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