React项目启动构建成功但访问localhost:3000出现module未定义错误

执行npm run start启动项目时，构建过程正常完成，但访问http://localhost:3000时出现module未定义的引用错误，已尝试排查依赖包问题、执行npm ci（clean install），均未解决。

错误截图：

项目package.json配置：

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^5.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/pro-light-svg-icons": "^5.15.2",
    "@fortawesome/pro-regular-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@microsoft/teams-js": "^1.9.0",
    "@react-icons/all-files": "^4.1.0",
    "@react-keycloak/web": "^3.4.0",
    "@reduxjs/toolkit": "^1.5.0",
    "@sentry/react": "^6.1.0",
    "@sentry/tracing": "^6.1.0",
    "@stripe/stripe-js": "^1.12.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@umango/frontend-services": "^1.2.18",
    "@umango/typings": "^1.0.6",
    "@umango/umango-events": "^1.0.56",
    "@welldone-software/why-did-you-render": "^6.0.5",
    "antd": "4.12.3",
    "array-move": "^3.0.1",
    "axios": "^0.21.0",
    "classnames": "^2.2.6",
    "craco-antd": "^1.19.0",
    "dotenv": "^16.0.1",
    "echarts": "^5.2.1",
    "echarts-for-react": "^3.0.1",
    "file-saver": "^2.0.5",
    "formik": "^2.2.6",
    "formik-antd": "^2.0.1",
    "i18next": "^19.8.7",
    "immer-reducer": "^0.7.10",
    "jquery": "^3.6.0",
    "keycloak-js": "^10.0.2",
    "lodash": "^4.17.20",
    "lodash.debounce": "^4.0.8",
    "lodash.throttle": "^4.1.1",
    "moment": "^2.29.1",
    "moment-business-days": "^1.2.0",
    "moment-timezone": "^0.5.33",
    "node-sass": "^4.14.1",
    "react": "^16.14.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-circular-progressbar": "^2.0.3",
    "react-copy-to-clipboard": "^5.0.3",
    "react-dom": "^16.14.0",
    "react-github-heatmap": "^1.0.7",
    "react-heatmap-grid": "^0.8.2",
    "react-helmet": "^6.1.0",
    "react-hot-loader": "^4.13.0",
    "react-i18next": "^11.8.6",
    "react-icons": "^4.4.0",
    "react-infinite-scroller": "^1.2.4",
    "react-masonry-css": "^1.0.14",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.4",
    "react-shepherd": "^3.3.3",
    "react-slick": "^0.27.14",
    "react-sortable-hoc": "^1.11.0",
    "react-spring": "^8.0.27",
    "react-tiny-fab": "^4.0.2",
    "react-to-print": "^2.13.0",
    "react-tooltip": "^4.2.17",
    "redux": "^4.0.5",
    "select2": "^4.1.0-rc.0",
    "slate": "^0.77.0",
    "slate-history": "^0.66.0",
    "slate-hyperscript": "^0.77.0",
    "slate-react": "^0.77.0",
    "socket.io-client": "^3.1.1",
    "styled-components": "^5.2.1",
    "survey-react": "^1.8.30",
    "surveyjs-widgets": "^1.8.43",
    "typescript": "^3.9.9",
    "xlsx": "^0.16.9",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.11",
    "@types/file-saver": "^2.0.5",
    "@types/jest": "^24.9.1",
    "@types/jquery": "^3.5.5",
    "@types/lodash": "^4.14.168",
    "@types/lodash.debounce": "^4.0.6",
    "@types/node": "^12.20.0",
    "@types/react": "^16.14.3",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-copy-to-clipboard": "^5.0.0",
    "@types/react-dom": "^16.9.10",
    "@types/react-helmet": "^6.1.0",
    "@types/react-infinite-scroller": "^1.2.1",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-slick": "^0.23.4",
    "@types/select2": "^4.0.53",
    "@types/smoothscroll-polyfill": "^0.3.1",
    "@types/socket.io-client": "^1.4.35",
    "@types/styled-components": "^5.1.7",
    "@types/webpack-env": "^1.16.0",
    "@types/xlsx": "0.0.36",
    "@types/yup": "^0.29.11",
    "cypress": "^6.6.0",
    "cypress-keycloak-commands": "^1.2.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco --max_old_space_size=4096 build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "cypress:open": "node_modules/.bin/cypress open",
    "cypress:run": "node_modules/.bin/cypress run",
    "cypress:verify": "node_modules/.bin/cypress verify",
    "cypress:info": "node_modules/.bin/cypress info",
    "start:ci": "cd build && serve --no-clipboard --listen 3000",
    "cypress:ci": "cypress run"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

针对构建正常但浏览器端出现module未定义的问题，可按以下步骤排查修复：

1. 检查Craco配置中的模块解析规则 #

项目使用@craco/craco和craco-antd，可能存在自定义webpack配置导致模块解析异常：

• 查看项目根目录下的craco.config.js，确认是否修改了resolve、module.rules或externals配置，尤其是是否错误地将核心模块标记为外部依赖（externals），导致浏览器无法找到该模块。
• 若没有自定义配置，尝试临时移除craco-antd，改用antd官方按需加载方式，再启动项目测试。

2. 排查第三方依赖的兼容性 #

项目依赖多个第三方包，部分包可能与当前React/Cra版本不兼容：

• 注意到你使用的react-scripts是3.4.4，@craco/craco是5.9.0，两者版本匹配，但survey-react、slate等旧版本依赖可能存在模块导出问题。尝试更新这些包到兼容版本，或查看它们的GitHub issues是否有类似module未定义的报告。
• 检查@umango/frontend-services、@umango/umango-events这类私有依赖，确认它们的打包格式是否为UMD/ES模块，避免使用CommonJS格式导致浏览器端解析错误。

3. 清理缓存与静态资源 #

• 执行以下命令彻底清理缓存：

  rm -rf node_modules/.cache
  npm run build --clean
  

• 清除浏览器缓存，或使用无痕模式访问页面，避免旧缓存导致的加载异常。

4. 检查代码中的模块导入方式 #

• 排查项目中是否存在require()和import混合导入的情况，尤其是TypeScript文件中，可能导致模块解析混乱。
• 检查是否有导入未安装的模块，或导入路径拼写错误，这类错误可能在构建时未被检测到，但浏览器端运行时会抛出异常。

5. 调整Node.js版本 #

当前项目依赖的node-sass是4.14.1，该版本对Node.js版本有要求（建议使用Node.js 12.x或14.x）。如果你的Node.js版本过高（如16+），可能导致模块编译异常，尝试切换到Node.js 14.x版本测试。

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