React/Spfx webpack 编译

Question

我有一个无法编译的 React/SPFx 项目。这是 package.json :

{
  "name": "project-name",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@fluentui/react": "^8.106.4",
    "@microsoft/rush-stack-compiler-4.5": "^0.5.0",
    "@microsoft/sp-component-base": "1.18.0",
    "@microsoft/sp-core-library": "1.18.0",
    "@microsoft/sp-lodash-subset": "1.18.0",
    "@microsoft/sp-office-ui-fabric-core": "1.18.0",
    "@microsoft/sp-property-pane": "1.18.0",
    "@microsoft/sp-webpart-base": "1.18.0",
    "@pnp/spfx-controls-react": "^3.15.0",
    "jquery": "^3.7.1",
    "moment": "^2.29.4",
    "office-ui-fabric-react": "^7.204.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.18.0",
    "@microsoft/eslint-plugin-spfx": "1.18.0",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "1.18.0",
    "@microsoft/sp-module-interfaces": "1.18.0",
    "@rushstack/eslint-config": "2.5.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "1.18.2",
    "ajv": "^6.12.5",
    "eslint": "8.7.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "^4.0.2",
    "typescript": "4.7.4"
  }
}

节点版本：18.18.2

这是我执行 gulp bundle --ship 时出现的错误：

如何解决这个问题？

我也尝试过 Node 16.X 和 14.X，结果相同。 重新安装节点模块也是如此。

Answer 1

我终于将

SPFx

从

1.18

降级为

1.14

： https://github.com/SharePoint/sp-dev-docs/issues/7691

我还是不明白为什么编译在

1.14

中有效，而在

1.18

中无效。

这是新的

package.json

文件：

{
  "name": "project-name",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/rush-stack-compiler-3.2": "^0.12.1",
    "@microsoft/rush-stack-compiler-4.5": "^0.5.0",
    "@microsoft/sp-core-library": "1.14.0",
    "@microsoft/sp-lodash-subset": "1.14.0",
    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
    "@microsoft/sp-property-pane": "1.14.0",
    "@microsoft/sp-webpart-base": "1.14.0",
    "@microsoft/sp-webpart-workbench": "^1.12.1",
    "@pnp/spfx-controls-react": "^3.15.0",
    "@pnp/spfx-property-controls": "^3.14.0",
    "gulp-cli": "^2.3.0",
    "jquery": "^3.7.1",
    "moment": "^2.29.4",
    "office-ui-fabric-react": "7.174.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "sp-client-custom-fields": "^1.3.7"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
    "@microsoft/sp-build-web": "1.14.0",
    "@microsoft/sp-module-interfaces": "1.14.0",
    "@microsoft/sp-tslint-rules": "1.14.0",
    "@types/react": "16.9.51",
    "@types/react-dom": "16.9.8",
    "@types/webpack-env": "1.13.1",
    "ajv": "^6.9.1",
    "gulp": "^4.0.2"
  }
}