gitlab-ci自动化部署npm build报错:React Hook useEffect has a missing dependency

针对react项目通过gitlab-ci自动打包部署出现的错误及解决办法，特此记录

1、问题描述

项目部署在服务器上，通过在gitlab上绑定Gitlab-runner，项目中配置gitlab-ci文件实现当master分支更新时，自动化打包部署等操作，但是CI模式下执行 npm run build时编译失败

错误信息如下

react-app-rewired build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run the following command: `npx browserslist --update-db`

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

./src/views/home/files/index.jsx
  Line 224:6:  React Hook useEffect has a missing dependency: 'fetchProjectInfo'. Either include it or remove the dependency array    react-hooks/exhaustive-deps
....


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! prd-app@1.0.0 build: `react-app-rewired build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the prd-app@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/liushiqin/.npm/_logs/2020-09-11T06_34_24_406Z-debug.log

2、问题分析

正常模式下，直接执行npm run build没有报错，可以打包成功，为了在本地测试gitlab-ci.yml文件执行的情况，可以在命令行输入

Export CI=true

切换到CI模式，然后再执行npm run build，就可以重现在gitlab-ci中执行yml文件的报错，错误信息如上

可知，Treating warnings as errors because process.env.CI = true.CI模式会把所有的warning当做errors处理，所以在服务器上自动执行yml文件中的命令会报错，我们只要把所有的warning解决掉就可以了。

3、解决

其他的warning这里不再赘述，只记录一个react中的错误：

React Hook useEffect has a missing dependency: 'fetchProjectInfo'. Either include it or remove the dependency array

这个是说在useEffect钩子里，缺少了一个依赖项，出现这个warning的原因是我们再useEffect钩子里调用的函数是在外部声明的。

如果只调用了一次，没有别的地方引用，可以把函数挪到钩子里面，如果是其他情况，也可以酌情处理或忽略这一条warning:

只要在对应代码前加上一条注释即可
eslint-disable-next-line react-hooks/exhaustive-deps
比如

  useEffect(() => {
    fetchProjectInfo();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [group.path, project.path]);

关于这个错误具体的解释可见so中文参考及stackoverflow