reactjsnode.jswebpacksharepoint-onlinespfx

React/Spfx webpack compilation


I have a React/SPFx project that I can't compile. Here is the 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"
  }
}

Node version : 18.18.2

Here is the error when I do gulp bundle --ship :

Compilation error:

compilation error

How to solve this ?

I tried with Node 16.X and 14.X too, same result. Ditto by reinstalling the node modules.


Solution

  • I finally downgraded SPFx from 1.18 to 1.14 : https://github.com/SharePoint/sp-dev-docs/issues/7691

    I still don't understand why the compilation works in 1.14 and not in 1.18.

    Here is the new package.json file :

    {
      "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"
      }
    }