[Bug]: Console Ninja disconnects in SPFx solution

[JonoSuave]

What happened?

I was expecting Console Ninja to remain connected when running gulp serve in my SPFx solution, but as I serve up the solution (gulp serve) the terminal shows the following:

[13:40:33] Starting gulp
[13:40:33] Starting subtask 'pre-copy'...
[13:40:33] Finished subtask 'pre-copy' after 87 μs
[13:40:33] Starting subtask 'copy-static-assets'...
[13:40:33] Starting subtask 'sass'...
[13:40:34] Finished subtask 'sass' after 662 ms
[13:40:34] Starting subtask 'lint'...
[13:40:34] [lint] eslint version: 8.7.0
[13:40:34] Starting subtask 'tsc'...
[13:40:34] [tsc] typescript version: 4.5.5
[13:40:34] Finished subtask 'copy-static-assets' after 815 ms
[13:40:40] Finished subtask 'tsc' after 6.4 s
[13:40:41] Finished subtask 'lint' after 7.44 s
[13:40:41] Starting subtask 'post-copy'...
[13:40:41] Finished subtask 'post-copy' after 78 μs
[13:40:41] Starting subtask 'configure-webpack'...
[13:40:42] Finished subtask 'configure-webpack' after 278 ms
[13:40:42] Starting subtask 'webpack'...
✔ Console Ninja extension has disconnected from Webpack
[13:40:54] Finished subtask 'webpack' after 12 s
[13:40:54] Starting subtask 'reload'...
[13:40:54] Finished subtask 'reload' after 3.12 ms
[13:40:54] Finished '_runWatch' after 21 s

Version

v1.0.319

CLI command to start your dev tool

gulp serve. Here's my package.json scripts:

  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test",
    "serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve",
    "ship": "gulp clean && gulp --ship && gulp package-solution --ship",
    "lint": "npx eslint src/**/*.{ts,tsx} --max-warnings=0",
    "plop": "tsc --project ./plop/tsconfig.json && plop --plopfile ./plop/plopfile.js"
  }

Steps to reproduce (or sample repo)

Create a microsoft spfx solution (I use React and Typescript). Serve up the solution

Log output

It says NO LOGS AVAILABLE

[smcenlly]

This message indicates that Console Ninja has detected that webpack is being used in production mode and so it is disabled.

This is part of a recent and necessary change that we made to prevent accidentally bundling Ninja runtime artefacts with production code (#279).

I'm not familiar with SPFx but based on their docs, it looks like you will need to extend your webpack configuration (example here) to set mode: "development" so that Ninja will load (note: the default mode when not set is "production").

If you're still having problems after trying that, please provide us with a sample repo that has the same problem.

[JonoSuave]

Where in the gulpfile.js would you set mode: "development"? Here was my attempt, but mode isn't a valid property:

"use strict";

var build = require("@microsoft/sp-build-web");

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

build.configureWebpack.mergeConfig({
	additionalConfiguration: function (generatedConfiguration) {
		generatedConfiguration.module.rules.push({
			test: /\.md$/,
			mode: "development",
			use: [
				{
					loader: "html-loader",
				},
				{
					loader: "markdown-loader",
				},
			],
		});

		return generatedConfiguration;
	},
});

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

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

	return result;
};

build.tslintCmd.enabled = false;

/* fast-serve */
var addFastServe = require("spfx-fast-serve-helpers").addFastServe;
addFastServe(build);
/* end of fast-serve */

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

[JonoSuave]

I think I figure out how to add the mode property, however, same issue persists (I'll see if I can spin up a demo project for you). Here's my updated gulpfile.js:

build.configureWebpack.mergeConfig({
	additionalConfiguration: function (generatedConfiguration) {
		generatedConfiguration.module.rules.push({
			test: /\.md$/,
			use: [
				{
					loader: "html-loader",
				},
				{
					loader: "markdown-loader",
				},
			],
		});
		generatedConfiguration.mode = "development";

		return generatedConfiguration;
	},
});

[smcenlly]

Unfortunately we need a demo project to be able to investigate further.