生产环境Docker构建React应用时遇fs模块无法解析错误

错误详情 #

• 错误信息：Module not found: Error: Can't resolve 'fs' in '/usr/src/app/node_modules/jpeg-exif/lib'
• Node版本：Node 18
• Docker构建执行命令：
  • npm install --legacy-peer-deps
  • npm run build

相关配置文件 #

package.json #

{
  "name": "dcts-client",
  "version": "0.1.0",
  "private": true,
  "homepage": "ecommerce",
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-brands-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@hookform/error-message": "^2.0.0",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.10.2",
    "@mui/x-date-pickers": "^5.0.0",
    "@react-pdf/renderer": "^3.0.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "card-validator": "^8.1.1",
    "cross-domain-storage": "^2.0.7",
    "dayjs": "^1.11.5",
    "env-cmd": "^10.1.0",
    "js-cookie": "^3.0.1",
    "lodash.isequal": "^4.5.0",
    "payment": "^2.4.6",
    "query-string": "^7.1.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-confirm-alert": "^3.0.6",
    "react-credit-cards": "^0.8.3",
    "react-csv": "^2.2.2",
    "react-data-table-component": "^7.5.3",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.36.1",
    "react-input-range": "^1.3.0",
    "react-medium-image-zoom": "^5.0.2",
    "react-phone-input-2": "^2.15.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "react-select": "^5.5.9",
    "react-slick": "^0.29.0",
    "react-to-print": "^2.14.8",
    "react-toastify": "^9.0.8",
    "simplebar-react": "^2.4.1",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.6",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "set PORT=3000 && react-scripts start",
    "build": "react-scripts build",
    "build:production": "set REACT_APP_API_ENDPOINT_BASE_URL=/api && set REACT_APP_API_ENDPOINT_REDIRECT_URL=http://alb-dct-prd-1561780064.us-east-2.elb.amazonaws.com/ && react-scripts build",
    "build:testing": "export REACT_APP_API_ENDPOINT_BASE_URL=/api REACT_APP_API_ENDPOINT_REDIRECT_URL=http://dctalb-1569668697.us-east-2.elb.amazonaws.com/ && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Dockerfile #

WORKDIR /usr/src/app/ecommerce

ARG PAYTRACE_URL

ARG REDIRECT_URL

COPY ./DCT-ECOMMERCE/package.json ./

RUN npm install --legacy-peer-deps

COPY ./DCT-ECOMMERCE .

RUN sed -i "s/protect.sandbox.paytrace.com/${PAYTRACE_URL}/g" /usr/src/app/ecommerce/public/index.html

RUN export REACT_APP_API_ENDPOINT_BASE_URL=/ecomm-api REACT_APP_API_ENDPOINT_REDIRECT_URL=${REDIRECT_URL} && npm run build -- --profile

FROM nginx:1.24.0-alpine

COPY ./ngnix/nginx-default.conf.template /etc/nginx/conf.d/default.conf.template
COPY --from=build-ecommerce /usr/src/app/ecommerce/build/ /usr/share/nginx/html/ecommerce

COPY ./docker-entrypoint.sh /

RUN chmod +x /docker-entrypoint.sh

ENTRYPOINT ["/docker-entrypoint.sh"]

CMD ["nginx", "-g", "daemon off;"]

EXPOSE 80 

异常截图 #

解决方案 #

这个错误是因为jpeg-exif依赖Node.js核心模块fs，但React构建的是浏览器端应用，默认不包含Node核心模块，需通过webpack配置解决：

方法1：使用craco覆盖配置（推荐，无需弹出react-scripts） #

1. 安装craco：

   npm install @craco/craco --save-dev
   

2. 在项目根目录创建craco.config.js：

   module.exports = {
     webpack: {
       configure: {
         resolve: {
           fallback: {
             fs: false, // 告诉webpack忽略fs模块
           },
         },
       },
     },
   };
   

3. 修改package.json中的scripts，替换react-scripts为craco：

   "scripts": {
     "start": "set PORT=3000 && craco start",
     "build": "craco build",
     "build:production": "set REACT_APP_API_ENDPOINT_BASE_URL=/api && set REACT_APP_API_ENDPOINT_REDIRECT_URL=http://alb-dct-prd-1561780064.us-east-2.elb.amazonaws.com/ && craco build",
     "build:testing": "export REACT_APP_API_ENDPOINT_BASE_URL=/api REACT_APP_API_ENDPOINT_REDIRECT_URL=http://dctalb-1569668697.us-east-2.elb.amazonaws.com/ && craco build",
     "test": "craco test",
     "eject": "craco eject"
   }
   

4. 重新执行Docker构建命令即可。

方法2：弹出react-scripts（不推荐，弹出后无法更新react-scripts） #

1. 执行弹出命令：

   npm run eject
   

2. 在项目根目录的config/webpack.config.js中找到resolve.fallback配置项，添加：

   fallback: {
     fs: false,
     // 若有其他缺失的Node核心模块，也可在此添加类似配置
   }
   

3. 重新执行构建命令。

额外排查方向 #

检查项目依赖中是否有间接引入jpeg-exif的包（比如图片处理类依赖），如果该功能非必需，可尝试移除对应依赖或升级版本，看是否能解决问题。

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