Error using Fast Serve 1.20.0/1.20.1 on new SPFx 1.20.0 project

[olemp]

I'm encountering an issue when trying to run spfx-fast-serve with the following setup:

• spfx-fast-serve version: 1.20.1
• SPFx version: 1.20.0
• Node version: 16.20.2

When I run the npm run serve command, the build starts but fails with the error:

[fast-serve] Cannot read properties of null (reading 'plugins') TypeError: Cannot read properties of null (reading 'plugins') at getExternalComponents (C:...\spfx-fast-serve-helpers\lib\common\helpers.js:256:31) at createBaseConfig (C:...\webpack\baseConfig.js:67:68) ...

It seems to be failing during the webpack configuration step. I'm not sure what might be causing the plugins property to be null.

Steps to Reproduce:

1. Clone a project using SPFx 1.20.0.
2. Install spfx-fast-serve version 1.20.1.
3. Run npm run serve.

Expected behavior:
The project should build and serve as expected.

Actual behavior:
The process terminates unexpectedly with a "Cannot read properties of null (reading 'plugins')" error.

[s-KaiNet]

According to the compatibility table, statging from SPFx 1.19 you should use NodeJS 18. Please update NodeJS version, npm version, delete node_modules, delete package-lock.json, reinstall dependencies and try serve again.

[olemp]

According to the compatibility table, statging from SPFx 1.19 you should use NodeJS 18. Please update NodeJS version, npm version, delete node_modules, delete package-lock.json, reinstall dependencies and try serve again.

Still the same issue with node v18.18.0, so I don't think that's the issue.

[s-KaiNet]

Could you create a sample repository and attach it to the issue? Or a link to the github repo.

[olemp]

Could you create a sample repository and attach it to the issue? Or a link to the github repo.

It's an internal repo in Azure DevOps, so it's not so easy.

This is where the error occurs. originalWebpackConfig is null here.

This is my package.json:

{
  "private": true,
  "main": "lib/index.js",
  "engines": {
    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
  },
  "scripts": {
    "serve": "gulp serve --nobrowser",
    "serve:fast": "fast-serve",
    "build": "gulp bundle",
    "build:ship": "gulp bundle --ship",
    "package": "gulp package-solution",
    "package:ship": "gulp package-solution --ship",
    "clean": "gulp clean",
    "trust-dev-cert": "gulp trust-dev-cert",
    "lint": "eslint ./src --ext .ts,.tsx --fix",
    "prettier": "prettier src/**/*.ts* --write",
    "postversion": "node ./scripts/postversion.js"
  },
  "dependencies": {
    "@fluentui/react": "8.106.4",
    "@microsoft/sp-core-library": "1.20.0",
    "@microsoft/sp-lodash-subset": "1.20.0",
    "@microsoft/sp-office-ui-fabric-core": "1.20.0",
    "@microsoft/sp-property-pane": "1.20.0",
    "@microsoft/sp-webpart-base": "1.20.0",
    "@pnp/logging": "4.5.0",
    "@ramonak/react-progress-bar": "5.3.0",
    "antd": "5.21.2",
    "jquery": "^3.5.1",
    "moment": "^2.27.0",
    "omit.js": "2.0.2",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.20.2",
    "@microsoft/eslint-plugin-spfx": "1.20.2",
    "@microsoft/rush-stack-compiler-4.7": "0.1.1",
    "@microsoft/sp-build-web": "1.20.2",
    "@microsoft/sp-module-interfaces": "1.20.2",
    "@rushstack/eslint-config": "4.0.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "1.15.2",
    "ajv": "6.12.5",
    "eslint": "8.57.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "prettier": "2.8.8",
    "spfx-fast-serve-helpers": "1.20.1",
    "typescript": "4.7.4"
  }
}

[s-KaiNet]

Could you post the content of gulpfile.js?

[olemp]

I'll stick to slow serve for now, and try this again later. Thanks!