升级Node、Babel及相关包导致React应用出现Babel Loader问题

问题 #

我负责的React应用技术栈较为复杂，目前正从Node 14升级至Node 16，并同步更新相关依赖包。由于Enzyme不支持React 16以上版本，React版本保持在16.14.0不变。更新部分包后，应用可本地构建并启动，但包括图片在内的多项资源无法加载；添加@babel/preset-react后问题仍未解决。运行npm start时出现报错，提示找不到/common/error-codes.js和foreign-content.js文件，而这两个文件并非我项目中的文件，推测是React构建文件未被正确导入，想咨询是否需要添加额外的loader？

以下是项目的package.json内容：

{
  "name": "pagebuilder-fusion-features",
  "version": "1.3.12",
  "description": "PageBuilder Fusion features",
  "scripts": {
    "build": "gulp build && npm run build-misc",
    "dev": "gulp",
    "format": "prettier './**/*.{js, jsx}' --write",
    "build-misc": "webpack --config ./config/build/dallas-news/misc/webpack.config.js",
    "clean": "node scripts/clean.js",
    "lint": "gulp lint",
    "lint-with-error-on-warning": "gulp lint && gulp throwErrorOnLintWarning",
    "start": "fusion start",
    "start:no-devtool": "node scripts/start",
    "test": "jest --coverage",
    "circleci_test": "jest --coverage --maxWorkers=4",
    "build:plugins": "sh scripts/build-plugins.sh",
    "watch:plugins": "sh scripts/watch-plugins.sh"
  },
  "devDependencies": {
    "@arc-fusion/cli": "^2.1.0",
    "@babel/core": "^7.22.9",
    "@babel/eslint-parser": "^7.18.9",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.1.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.22.5",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^22.4.4",
    "babel-loader": "^9.1.3",
    "babel-plugin-root-import": "^6.2.0",
    "babel-polyfill": "^6.26.0",
    "chalk": "^2.4.1",
    "clean-webpack-plugin": "^0.1.19",
    "create-react-class": "^15.6.3",
    "dotenv": "^6.2.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint": "^8.20.0",
    "eslint-config-prettier": "^3.6.0",
    "eslint-import-resolver-babel-root-import": "0.0.2",
    "eslint-import-resolver-webpack": "^0.9.0",
    "eslint-plugin-jest": "^21.27.2",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "file-loader": "^5.0.0",
    "fs-extra": "^6.0.1",
    "glob": "^7.1.4",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-eslint": "^6.0.0",
    "gulp-rename": "^2.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^22.4.3",
    "jest-enzyme": "^6.1.2",
    "jest-extended": "^0.11.2",
    "loader-utils": "^3.2.1",
    "mini-css-extract-plugin": "^2.0.0",
    "mkdirp": "^0.5.1",
    "mutationobserver-shim": "^0.3.3",
    "prettier": "1.18.2",
    "prettier-eslint": "^8.8.2",
    "prettier-eslint-cli": "^4.7.1",
    "purgecss": "^1.3.0",
    "react-test-renderer": "^16.8.6",
    "resolve-url-loader": "2.3.0",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "xml2js": "^0.4.22"
  },
  "author": "Arc Publishing",
  "license": "ISC",
  "dependencies": {
    "@arc-core-components/content-schema_author-api-v4": "0.1.0-beta.1",
    "@babel/runtime": "^7.5.5",
    "@dallasnews/components": "^3.0.10-fusionNodeUpdate.1",
    "@dmn-arc-core-components/amp-document-boilerplate": "^1.0.6-alpha",
    "@dmn-arc-core-components/content-schema_ans-document-v0.6.2": "^1.0.0-alpha",
    "@dmn-arc-core-components/content-schema_ans-feed-v0.6.2": "^1.0.0-alpha",
    "@dmn-arc-core-components/content-source_site-service-v3": "^1.0.0-alpha",
    "@dmn-arc-core-components/content-source_story-feed_author-v4": "^1.0.0-alpha",
    "@dmn-arc-core-components/content-source_story-feed_sections-v4": "^1.0.0-alpha",
    "@dmn-arc-core-components/content-source_story-feed_tag-v4": "^1.0.0-alpha",
    "@dmn-arc-core-components/feature_article-body": "^1.0.2-alpha.3",
    "@dmn-arc-core-components/tools_mock-ans": "^1.0.0-alpha",
    "@imgix/js-core": "^3.4.0",
    "axios": "^0.19.0",
    "buffer": "^5.4.0",
    "cheerio": "^1.0.0-rc.2",
    "date-fns": "^2.16.1",
    "date-fns-tz": "^1.0.10",
    "eslint-plugin-import": "^2.27.5",
    "google-spreadsheet": "^3.3.0",
    "htmlparser2": "^4.0.0",
    "isemail": "^3.2.0",
    "lodash-es": "^4.17.21",
    "prop-types": "^15.7.2",
    "pym.js": "^1.3.2",
    "react": "16.14.0",
    "react-dom": "16.8.6",
    "react-error-boundary": "^1.2.5",
    "sailthru-client": "^4.0.0",
    "slugify": "^1.6.4",
    "terser": "^4.8.1",
    "thumbor": "^0.1.5",
    "url": "^0.11.0",
    "xss": "^1.0.6"
  },
  "lint-staged": {
    "*.{js,json,css,scss,md,graphql}": [
      "prettier --write",
      "git add"
    ]
  },
  "engines": {
    "node": "^16.0.0"
  },
  "jest": {
    "verbose": true,
    "testURL": "http://localhost/",
    "moduleNameMapper": {
      "\\.(css|less|scss)$": "identity-obj-proxy",
      "\\.svg$": "<rootDir>/__mocks__/svg.mock.js",
      "^lodash-es$": "lodash"
    },
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 0,
        "functions": 0,
        "lines": 0
      }
    },
    "moduleDirectories": [
      "node_modules",
      "components",
      "mocks",
      "properties"
    ],
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!(@dallasnews)/)"
    ],
    "setupTestFrameworkScriptFile": "./setupTests.js"
  },
  "main": "setupTests.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wapopartners/Skeleton-PageBuilder-Fusion-Features.git"
  },
  "keywords": [],
  "bugs": {
    "url": "https://github.com/wapopartners/Skeleton-PageBuilder-Fusion-Features/issues"
  },
  "homepage": "https://github.com/wapopartners/Skeleton-PageBuilder-Fusion-Features#readme"
}

解决方案建议 #

1. 替换Webpack资源处理方式 #

你当前使用的file-loader@5.0.0在Webpack 5中已被内置的Asset Modules替代，继续使用旧loader会导致资源解析兼容问题，建议修改Webpack配置：

• 移除file-loader相关配置，改用Webpack 5原生的type: 'asset/resource'处理图片等静态资源
• 示例配置：

  module.exports = {
    module: {
      rules: [
        // 保留现有babel-loader等规则
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'assets/images/[hash][ext][query]' // 自定义输出路径
          }
        },
        // 如果有字体等其他资源，添加对应规则
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'assets/fonts/[hash][ext][query]'
          }
        }
      ]
    }
  }
  

2. 排查缺失文件的依赖来源 #

/common/error-codes.js和foreign-content.js属于依赖包内部文件，大概率是依赖更新后路径变化或Webpack解析配置异常导致：

• 检查Webpack配置中的resolve.modules是否包含node_modules，确保依赖能被正确查找：

  resolve: {
    modules: ['node_modules', path.resolve(__dirname, 'src')]
  }
  

• 清理依赖缓存：执行rm -rf node_modules package-lock.json，然后重新npm install，避免缓存导致的依赖版本混乱

3. 优化Babel配置 #

• 确保Babel配置文件（.babelrc或babel.config.json）中正确包含@babel/preset-react，并移除冗余的@babel/plugin-syntax-jsx（该插件已被@babel/preset-react包含）：

  {
    "presets": [
      ["@babel/preset-env", { "targets": { "node": "16" } }],
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-decorators",
      "@babel/plugin-proposal-optional-chaining",
      "@babel/plugin-transform-runtime"
      // 保留其他必要插件，移除@babel/plugin-syntax-jsx
    ]
  }
  

4. 验证Fusion CLI兼容性 #

你使用的@arc-fusion/cli@2.1.0需要确认是否支持Node 16，若版本不兼容，升级到该包支持Node 16的最新版本，避免CLI在启动时出现资源解析异常。

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