Issue with fast serve

[luqmanzakariya]

I'm using node v16.20.2

This is my package.json.

{
  "name": "XXXX",
  "version": "0.0.2",
  "private": true,
  "engines": {
    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "start": "gulp bundle & gulp serve",
    "build": "gulp build --ship && gulp bundle --ship && gulp package-solution --ship",
    "clean": "gulp clean",
    "test": "gulp test",
    "lint": "eslint --ext .ts \"src/**/*.ts\" \"src/**/*.tsx\" --max-warnings=0",
    "serve": "fast-serve"
  },
  "dependencies": {
    "@fluentui/react": "^7.199.1",
    "@microsoft/load-themed-styles": "^2.0.92",
    "@microsoft/sp-component-base": "1.17.4",
    "@microsoft/sp-core-library": "1.17.4",
    "@microsoft/sp-lodash-subset": "1.17.4",
    "@microsoft/sp-office-ui-fabric-core": "1.17.4",
    "@microsoft/sp-property-pane": "1.17.4",
    "@microsoft/sp-webpart-base": "1.17.4",
    "@pnp/graph": "^3.21.0",
    "@pnp/logging": "^3.20.1",
    "@pnp/sp": "^3.20.1",
    "@pnp/spfx-controls-react": "^3.16.1",
    "devextreme": "23.2.3",
    "devextreme-react": "23.2.3",
    "filepond": "^4.30.6",
    "filepond-plugin-file-validate-type": "^1.2.9",
    "filepond-plugin-image-preview": "^4.6.12",
    "jwt-decode": "^4.0.0",
    "office-ui-fabric-react": "^7.199.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-filepond": "^7.1.2",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.17.4",
    "@microsoft/eslint-plugin-spfx": "1.17.4",
    "@microsoft/rush-stack-compiler-4.5": "0.5.0",
    "@microsoft/sp-build-web": "1.17.4",
    "@microsoft/sp-module-interfaces": "1.17.4",
    "@rushstack/eslint-config": "2.5.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.7.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "spfx-fast-serve-helpers": "~1.17.0",
    "typescript": "4.7.4",
    "url-loader": "^4.1.1"
  }
}

The fast serve is successfully running:

But my webparts always return this, meanwhile while I'm using gulp bundle and gulp serve it's always render correctly

Please help, I'm stuck with this

[s-KaiNet]

It looks like it's some kind of issue with your resource localization files. What do you see in network developer tab, are there any failed requests? Where is your localization files are located, are there under regular path like src/webparts/<webpart>/loc/en-us.js or somewhere else?

[luqmanzakariya]

There are no failed request. My localization are located in regular path:

This is my webpack.extend.js

/*
 * User webpack settings file. You can add your own settings here.
 * Changes from this file will be merged into the base webpack configuration file.
 * This file will not be overwritten by the subsequent spfx-fast-serve calls.
 */

/**
 * you can add your project related webpack configuration here, it will be merged using webpack-merge module
 * i.e. plugins: [new webpack.Plugin()]
 */
const webpackConfig = {
  devServer: {
    hot: true,
    liveReload: false,
  },
  module: {
    rules: [
      {
        test: /\.(woff2?)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            query: {
              limit: 10000,
              mimetype: 'application/font-woff',
            },
          },
        ],
      },
    ],
  },
};

/**
 * For even more fine-grained control, you can apply custom webpack settings using below function
 * @param {object} initialWebpackConfig - initial webpack config object
 * @param {object} webpack - webpack object, used by SPFx pipeline
 * @returns webpack config object
 */
const transformConfig = function (initialWebpackConfig, webpack) {
  // transform the initial webpack config here, i.e.
  // initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.

  return initialWebpackConfig;
};

// eslint-disable-next-line no-undef
module.exports = {
  webpackConfig,
  transformConfig,
};

Is there other file that I shoud check?

[s-KaiNet]

The config looks good. It seems it's something related to your configuration, but tbh it's difficult to say what exactly. Are you sure your localization files are good? Because the error points directly to your localization files?

[NishkalankBezawada]

Try rebuilding the project,I had similar kind of issue, when I have installed 'pnp/spfx-controls-react'.

Steps I followed,

spfx-fast-serve
npm i
npm run serve

//Nish

[ymaldor1]

Hi,
I've been running with a similar problem with pnp/spfx-controls-react specifically. The build runs fine on gulp serve but crashes in similar manners than the original poster using npm fast serve. It runs fine if i don't call anything from the pnp/spfx-controls-react module too, I see that the original poster also uses that module, I would advise @luqmanzakariya to make an attempt with the same project but commenting anything using that module to confirm whether or not the source of the issue is the same.