Docker/Jenkins构建中使用ESLint提示找不到eslint-plugin-react插件

问题根因 #

你遇到的报错本质是用户权限与npm全局包路径不匹配：

• npm默认将全局包安装到root用户的专属路径下，你在Dockerfile末尾切换到了jenkins用户运行进程，jenkins用户没有权限访问root用户的全局npm包目录，导致eslint启动后找不到全局安装的插件。
• 额外错误点：全局安装npm包时不需要加--save-dev参数，该参数仅用于本地项目安装开发依赖时写入package.json，全局安装加这个参数没有任何作用，甚至可能引发异常。

解决方案 #

第一步：修改Dockerfile.node配置 #

调整npm全局安装路径，确保所有用户都能访问全局安装的包，同时修正安装参数：

FROM node:14

# 配置npm全局安装路径为公共可访问目录
ENV NPM_PREFIX=/usr/local/npm-global
RUN mkdir -p $NPM_PREFIX && \
    npm config set prefix $NPM_PREFIX
ENV PATH="$NPM_PREFIX/bin:$PATH"
ENV NODE_PATH="$NPM_PREFIX/lib/node_modules:$NODE_PATH"

# 全局安装依赖，移除无效的--save-dev参数，合并RUN指令减少镜像层
RUN npm install -g \
    eslint@latest \
    react@17.0.1 \
    react-app@1.1.2 \
    eslint-plugin-react@7.26.1 \
    typescript@4.3.4 \
    @typescript-eslint/parser@5.0.0 \
    @typescript-eslint/eslint-plugin@5.0.0

RUN useradd jenkins --shell /bin/bash --create-home
USER jenkins

这里新增的NODE_PATH环境变量会告诉Node.js全局包的查找路径，eslint也会遵循该路径查找插件，解决插件找不到的问题。

第二步：修正Jenkinsfile的eslint执行命令（兜底可选） #

如果修改Dockerfile后仍有问题，大概率是你之前添加的--resolve-plugins-relative-to参数路径错误，显式指定全局包路径即可：

steps {
    dir(path: 'source/web-ui') {
        echo 'Running ESLint against JS and TSX files'
        sh'''
        # 调试时可先执行以下命令确认包安装状态
        # npm root -g
        # npm list -g eslint-plugin-react
        eslint --config .eslintrc.json .. --ext .js,.tsx --resolve-plugins-relative-to $NPM_PREFIX/lib/node_modules
        '''
    }
}

更稳妥的可选方案 #

如果不需要全局共用eslint版本，推荐将eslint、eslint-plugin-react等所有依赖都写入项目source/web-ui/package.json的devDependencies中，执行时用npx eslint命令调用项目本地安装的eslint，完全避免全局路径匹配问题，也更符合前端项目的最佳实践。

内容的提问来源于stack exchange，提问作者user14524171