@griddo/ax 12.5.0 → 12.5.1

package/config/__tests__/ModulePathInMessagesPlugin.test.js

@@ -0,0 +1,93 @@
+/**
+ * Guards the fix for webpack 5 dropping the file name from module warnings.
+ *
+ * webpack 4 gave CRA warnings as strings carrying their own `./src/Foo.tsx` header;
+ * webpack 5 moves it to a `moduleName` field that `formatWebpackMessages` ignores,
+ * which left "Attempted import error: 'x' is not exported from './styles.module.css'"
+ * pointing at no file in particular.
+ */
+const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
+
+const ModulePathInMessagesPlugin = require("../webpack/ModulePathInMessagesPlugin");
+
+/** Minimal stand-in for the two tapable hooks the plugin uses. */
+const runPlugin = ({ warnings = [], errors = [] } = {}) => {
+	const compilation = {
+		warnings,
+		errors,
+		requestShortener: {},
+		hooks: { afterSeal: { tap: (_name, fn) => fn() } },
+	};
+	const compiler = { hooks: { compilation: { tap: (_name, fn) => fn(compilation) } } };
+
+	new ModulePathInMessagesPlugin().apply(compiler);
+
+	return compilation;
+};
+
+const makeWarning = (message, { module = true, loc = { start: { line: 2, column: 12 } } } = {}) => ({
+	message,
+	loc,
+	module: module ? { readableIdentifier: () => "./src/ui/modules/Wysiwyg/index.tsx" } : undefined,
+});
+
+describe("ModulePathInMessagesPlugin", () => {
+	test("prefixes the warning with the module path and location", () => {
+		const warning = makeWarning("export 'intro' was not found in './styles.module.css'");
+
+		runPlugin({ warnings: [warning] });
+
+		expect(warning.message).toBe(
+			"./src/ui/modules/Wysiwyg/index.tsx:2:12\nexport 'intro' was not found in './styles.module.css'",
+		);
+	});
+
+	test("decorates errors too", () => {
+		const error = makeWarning("Module not found");
+
+		runPlugin({ errors: [error] });
+
+		expect(error.message).toBe("./src/ui/modules/Wysiwyg/index.tsx:2:12\nModule not found");
+	});
+
+	test("omits the location when the warning has none", () => {
+		const warning = makeWarning("boom", { loc: null });
+
+		runPlugin({ warnings: [warning] });
+
+		expect(warning.message).toBe("./src/ui/modules/Wysiwyg/index.tsx\nboom");
+	});
+
+	test("leaves warnings that are not attached to a module alone", () => {
+		const warning = makeWarning("something global", { module: false });
+
+		runPlugin({ warnings: [warning] });
+
+		expect(warning.message).toBe("something global");
+	});
+
+	test("does not prefix twice across watch-mode rebuilds", () => {
+		const warning = makeWarning("export 'intro' was not found in './styles.module.css'");
+
+		runPlugin({ warnings: [warning] });
+		const afterFirstBuild = warning.message;
+		runPlugin({ warnings: [warning] });
+
+		expect(warning.message).toBe(afterFirstBuild);
+	});
+
+	// The contract that makes the whole thing worthwhile: formatWebpackMessages
+	// rewrites the export line wholesale and strips a trailing `2:12-24` off line 0,
+	// so the header has to survive both to reach the terminal.
+	test("the path survives formatWebpackMessages", () => {
+		const warning = makeWarning("export 'intro' (imported as 'styles') was not found in './styles.module.css'");
+
+		runPlugin({ warnings: [warning] });
+		const [formatted] = formatWebpackMessages({ errors: [], warnings: [{ message: warning.message }] }).warnings;
+
+		expect(formatted).toBe(
+			"./src/ui/modules/Wysiwyg/index.tsx:2:12\n" +
+				"Attempted import error: 'intro' is not exported from './styles.module.css' (imported as 'styles').",
+		);
+	});
+});

package/config/webpack/ModulePathInMessagesPlugin.js

@@ -0,0 +1,47 @@
+const NAME = "GriddoModulePathInMessages";
+
+/**
+ * Prefixes every module-attached warning/error with the file that caused it.
+ *
+ * webpack 4 handed CRA its warnings as plain strings that already carried the
+ * `./src/Foo.tsx 2:12-24` header. webpack 5 hands them over as objects
+ * (`{ message, moduleName, loc }`), and `react-dev-utils`'s `formatWebpackMessages`
+ * only reads `.message` — so the file and location are dropped on the floor.
+ * That leaves messages like "Attempted import error: 'intro' is not exported
+ * from './styles.module.css'" with no way to tell which of the many
+ * `styles.module.css` files is at fault.
+ *
+ * Folding the location back into `.message` restores the webpack 4 shape that
+ * `formatWebpackMessages` expects (line 0 = file, line 1 = message), and it fixes
+ * both paths at once: `griddo build` (which calls the formatter directly) and
+ * `griddo start` (where `createCompiler` calls it internally, out of our reach).
+ */
+class ModulePathInMessagesPlugin {
+	apply(compiler) {
+		compiler.hooks.compilation.tap(NAME, (compilation) => {
+			// `afterSeal` runs once dependency warnings have been collected and before
+			// anything can call `stats.toJson()`.
+			compilation.hooks.afterSeal.tap(NAME, () => {
+				const decorate = (err) => {
+					const module = err.module;
+					if (!module || typeof module.readableIdentifier !== "function") {
+						return;
+					}
+					const name = module.readableIdentifier(compilation.requestShortener);
+					const loc = err.loc?.start ? `:${err.loc.start.line}:${err.loc.start.column}` : "";
+					const header = `${name}${loc}`;
+					// Guard against double-prefixing on watch-mode rebuilds that reuse errors.
+					if (typeof err.message !== "string" || err.message.startsWith(header)) {
+						return;
+					}
+					err.message = `${header}\n${err.message}`;
+				};
+
+				compilation.warnings.forEach(decorate);
+				compilation.errors.forEach(decorate);
+			});
+		});
+	}
+}
+
+module.exports = ModulePathInMessagesPlugin;

package/config/webpack.config.js

@@ -18,6 +18,7 @@ const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
 const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin");
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const ModulePathInMessagesPlugin = require("./webpack/ModulePathInMessagesPlugin");
 const createEnvironmentHash = require("./webpack/persistentCache/createEnvironmentHash");
 
 const postcssNormalize = require("postcss-normalize");
@@ -548,6 +549,10 @@ module.exports = function (webpackEnv) {
 			],
 		},
 		plugins: [
+			// webpack 5 moves the offending file out of the warning text and into a
+			// separate `moduleName` field that react-dev-utils' formatter ignores. This
+			// folds it back in so messages point at a file again.
+			new ModulePathInMessagesPlugin(),
 			// Restore webpack 4's Node core-module handling for browser bundles. Clients run
 			// `griddo build` (this config) against their own instance, so this guards legacy
 			// instances against "Module not found" for Node builtins that webpack 5 no longer

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.5.0",
+	"version": "12.5.1",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -199,5 +199,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "02d4a5b3c3d3f4a4339db6746b6d6572139e51e5"
+	"gitHead": "0341f4c939ce5e316e37effdaca2ef26dee8b8af"
 }