spfx-fast-serve: fast-serve no longer serves. It fails shortly after the build is finished, but before serving content.

spfx-fast-serve@4.0.0, installed globally though docs indicate calling CLI with npx ... would remove the need for this.

VS Code Terminal, fast-serve Logs (expand for content)

> fast-serve

[15:51:24] [fast-serve] Running fast-serve in debug mode
[15:51:24] [fast-serve] fast-serve: 1.18.11
[15:51:24] [fast-serve] node: v18.19.0
[15:51:24] [fast-serve] platform: win32
[15:51:24] [fast-serve] command: npm[serve]="fast-serve"
[15:51:24] [fast-serve] Settings:
{
  port: 4321,
  memory: 8192,
  isLibraryComponent: false,
  loggingLevel: 'normal',
  fullScreenErrors: true,
  eslint: true,
  hotRefresh: false,
  reactProfiling: false,
  containers: false,
  debug: true
}
[15:51:24] [fast-serve] Running SPFx bundle
[15:51:26] Node flags detected: --max-old-space-size=8192
[15:51:26] Respawned to PID: 6664
Build target: DEBUG
[15:51:38] Using gulpfile ~\my-project\client\gulpfile.js
[15:51:38] Starting 'bundle'...
[15:51:38] Starting gulp
[15:51:38] Starting subtask 'pre-copy'...
[15:51:38] Finished subtask 'pre-copy' after 219 ms
[15:51:38] Starting subtask 'copy-static-assets'...
[15:51:38] Starting subtask 'sass'...
[15:51:40] Finished subtask 'sass' after 1.49 s
[15:51:40] Starting subtask 'lint'...
[15:51:40] [lint] eslint version: 8.7.0
[15:51:40] Starting subtask 'tsc'...
[15:51:40] [tsc] typescript version: 4.7.4
[15:51:40] Finished subtask 'copy-static-assets' after 1.86 s
[15:51:52] Finished subtask 'tsc' after 12 s
[15:51:52] Starting subtask 'save-webpack-config'...
[15:51:52] Finished subtask 'save-webpack-config' after 1.14 ms
[15:51:58] Finished subtask 'lint' after 19 s
[15:51:58] Starting subtask 'post-copy'...
[15:51:58] Finished subtask 'post-copy' after 508 μs
[15:51:58] Starting subtask 'configure-webpack'...
[15:52:00] Finished subtask 'configure-webpack' after 1.69 s
[15:52:00] Starting subtask 'webpack'...
[15:52:17] Warning - [webpack] 'dist':
The "output.publicPath" option is set in the Webpack configuration. The SetPublicPathCurrentScriptPlugin plugin may produce unexpected results. It is recommended that the "output.publicPath" configuration option be unset when using this plugin.

[15:52:17] Finished subtask 'webpack' after 17 s
[15:52:17] Finished 'bundle' after 40 s
[15:52:18] ==================[ Finished ]==================
Warning - [webpack] 'dist':
The "output.publicPath" option is set in the Webpack configuration. The SetPublicPathCurrentScriptPlugin plugin may produce unexpected results. It is recommended that the "output.publicPath" configuration option be unset when using this plugin.

[15:52:18] Project text-replacement-tool version:0.0.1
[15:52:18] Build tools version:3.18.1
[15:52:18] Node version:v18.19.0
[15:52:18] Total duration:50 s
[15:52:18] Task warnings:1
[15:52:19] [fast-serve] Finished SPFx bundle in 54.83s
[helpers.js, getEntryPoints] for loop {
  key: 'my-project',
  'entry[key]': {
    import: 'C:\\my-project\\client\\lib\\webparts\\myProject\\myProjectWebPart.js',
    library: { type: 'amd', name: '57fae6c5-2682-443b-a5c4-f4cd85f892f0_0.0.1' }
  }
}
[15:52:23] [fast-serve] entryPath.indexOf is not a function
C:\my-project\client\node_modules\spfx-fast-serve-helpers\lib\common\helpers.js:92
        if (entryPath.indexOf('bundle-entries') === -1) {
                      ^

TypeError: entryPath.indexOf is not a function
    at getEntryPoints (C:\my-project\client\node_modules\spfx-fast-serve-helpers\lib\common\helpers.js:92:23)
    at C:\my-project\client\node_modules\spfx-fast-serve-helpers\lib\webpack\configureWebPack.js:59:57
    at Generator.next (<anonymous>)
    at fulfilled (C:\my-project\client\node_modules\spfx-fast-serve-helpers\lib\webpack\configureWebPack.js:28:58)

Node.js v18.19.0
[15:52:23] [fast-serve] The process terminated unexpectedly

The important piece:

[15:52:23] [fast-serve] entryPath.indexOf is not a function
C:\my-project\client\node_modules\spfx-fast-serve-helpers\lib\common\helpers.js:92
        if (entryPath.indexOf('bundle-entries') === -1) {

I’ve added a console.log(...) statement to the helpers.js file in my node_modules folder. That puts the following content in the logs, just before the error occurs:

[helpers.js, getEntryPoints] for loop {
  key: 'my-project',
  'entry[key]': {
    import: 'C:\\my-project\\client\\lib\\webparts\\myProject\\myProjectWebPart.js',
    library: { type: 'amd', name: '57fae6c5-2682-443b-a5c4-f4cd85f892f0_0.0.1' }
  }
}

It appears that the helper.js method is looking for something different in the generated temp/_webpack_config.json file than what it is finding.

{
  // ...
  "entry": {
    "my-project": {
      "import": "C:\\my-project\\client\\lib\\webparts\\myProject\\myProjectWebPart.js",
      "library": {
        "type": "amd",
        "name": "57fae6c5-2682-443b-a5c4-f4cd85f892f0_0.0.1"
      }
    }
  },
  // ...
}

Should build process be generating something different in the temp/_webpack_config.json file? What can I do to fix this error?

package.json

{
  "name": "my-project",
  "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",
    "serve": "fast-serve",
    "package": "gulp bundle --ship && gulp package-solution --ship",
    "clean": "gulp clean",
    "test": "gulp test",
    "trust-cert": "gulp trust-dev-cert"
  },
  "dependencies": {
    "@fluentui/react": "^8.106.4",
    "@fluentui/react-hooks": "^8.6.36",
    "@microsoft/sp-component-base": "^1.18.2",
    "@microsoft/sp-core-library": "^1.18.2",
    "@microsoft/sp-lodash-subset": "^1.18.2",
    "@microsoft/sp-odata-types": "^1.18.2",
    "@microsoft/sp-office-ui-fabric-core": "^1.18.2",
    "@microsoft/sp-page-context": "^1.18.2",
    "@microsoft/sp-property-pane": "^1.18.2",
    "@microsoft/sp-webpart-base": "^1.18.2",
    "@pnp/spfx-controls-react": "^3.17.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "^1.18.2",
    "@microsoft/eslint-plugin-spfx": "^1.18.2",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "^1.18.2",
    "@microsoft/sp-module-interfaces": "^1.18.2",
    "@rushstack/eslint-config": "2.5.1",
    "@types/node": "^20.11.28",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "dotenv": "^16.4.5",
    "dotenv-expand": "^11.0.6",
    "eslint": "8.7.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "prettier": "^3.2.5",
    "spfx-fast-serve-helpers": "~1.18.0",
    "typescript": "4.7.4",
    "webpack": "^4.47.0"
  }
}

gulpfile.js

/* eslint-disable @typescript-eslint/no-var-requires */
'use strict';

const build = require('@microsoft/sp-build-web');
const webpack = require("webpack");
const getClientEnvironment = require("./process-env.cjs");

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

build.configureWebpack.mergeConfig({
  additionalConfiguration: (cfg => {
    let pluginDefine = null;
    for (var i = 0; i < cfg.plugins.length; i++) {
      var plugin = cfg.plugins[i];
      if (plugin instanceof webpack.DefinePlugin) {
        pluginDefine = plugin;
      }
    }

    const currentEnv = getClientEnvironment().stringified;

    if (pluginDefine) {
      pluginDefine.definitions = { ...pluginDefine.definitions, ...currentEnv };
    } else {
      cfg.plugins.push(new webpack.DefinePlugin(currentEnv));
    }

    if (build.getConfig().production) {
      var basePath = build.writeManifests?.taskConfig?.cdnBasePath || '';
      if (!basePath.endsWith('/')) {
        basePath += '/';
      }
      cfg.output.publicPath = basePath;
    } else {
      cfg.output.publicPath = "https://localhost:4321/dist/";
    }

    return cfg;
  })
});

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */

build.initialize(require('gulp'));

webpack.extend.js

/* eslint-disable @typescript-eslint/no-var-requires */
/*
 * 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.
 */

const build = require("@microsoft/sp-build-web");
const getClientEnvironment = require("../process-env.cjs");

/**
 * you can add your project related webpack configuration here, it will be merged using webpack-merge module
 * i.e. plugins: [new webpack.Plugin()]
 */
let webpackConfig = {}

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

  console.log("[Fast-Serve, 'webpack.extend.js'] transformConfig function - start", { cfg });

  let pluginDefine = null;
  for (var i = 0; i < cfg.plugins.length; i++) {
    var plugin = cfg.plugins[i];
    if (plugin instanceof webpack.DefinePlugin) {
      pluginDefine = plugin;
    }
  }

  const currentEnv = getClientEnvironment().stringified;

  console.log("[Fast-Serve, 'webpack.extend.js'] transformConfig function - currentEnv", { currentEnv });

  if (pluginDefine) {
    pluginDefine.definitions = { ...pluginDefine.definitions, ...currentEnv };
    console.log("[Fast-Serve, 'webpack.extend.js'] transformConfig function - pluginDefine.definitions", {
      "pluginDefine.definitions": pluginDefine.definitions,
    });
  } else {
    cfg.plugins.push(new webpack.DefinePlugin(currentEnv));
  }

  if (build.getConfig().production) {
    var basePath = build.writeManifests?.taskConfig?.cdnBasePath || '';
    if (!basePath.endsWith("/")) {
      basePath += "/";
    }
    cfg.output.publicPath = basePath;
  } else {
    cfg.output.publicPath = "https://localhost:4321/dist/";
  }

  console.log("[Fast-Serve, 'webpack.extend.js'] transformConfig function - finished", { cfg });

  return cfg;
};

module.exports = {
  webpackConfig,
  transformConfig,
};

More environment info:

>npm list -g --depth 0
C:\Program Files\nodejs -> .\
+-- @microsoft/generator-sharepoint@1.18.2
+-- @pnp/cli-microsoft365@7.5.0
+-- gulp-cli@2.3.0
+-- npm@10.2.3
+-- spfx-fast-serve@4.0.0
`-- yo@5.0.0

Node: 18.19.0

About this issue

Original URL
State: closed
Created 3 months ago
Comments: 15 (5 by maintainers)

Most upvoted comments

Glad the issue is finally resolved!

s-KaiNet on Apr 2, 2024

I replaced ^ with ~ in the package.json file (just with the @microsoft items), deleted the package-lock.json, deleted node_modules, and then ran npm install.

Shifting from allowing “minor” updates to only permitting “patch” updates solved the problem.

Thank you!

Zarepheth on Apr 2, 2024