Fix: create-plugin common Webpack config types #1680

MattIPv4 · 2025-04-04T02:02:09Z

What this PR does / why we need it:

When extending the Webpack config, the current create-plugin-provided config generates type-errors.

Which issue(s) this PR fixes:

cc https://github.com/grafana/grafana-setupguide-app/pull/100 (private)

Special notes for your reviewer:

N/A

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install [email protected]
npm install @grafana/[email protected]
# or 
yarn add [email protected]
yarn add @grafana/[email protected]

CLAassistant · 2025-04-04T02:02:15Z

All committers have signed the CLA.

github-actions · 2025-04-04T02:02:26Z

Hello! 👋 This repository uses Auto for releasing packages using PR labels.

✨ This PR can be merged and will trigger a new patch release.
NOTE: When merging a PR with the release label please avoid merging another PR. For further information see here.

hugohaggmark

I think this looks good but I'm going to let someone with more experience with these parts approve the changes as they're more than just type changes.

packages/create-plugin/templates/common/.config/webpack/webpack.config.ts

Co-authored-by: Hugo Häggmark <[email protected]>

packages/create-plugin/templates/common/.config/webpack/webpack.config.ts

…2456)

leventebalogh

Thanks for the fix @MattIPv4, looks good to me 👍

packages/create-plugin/templates/common/.config/webpack/utils.ts

Re-evaluating if the Env type is correct.

packages/create-plugin/templates/common/.config/webpack/utils.ts

jackw · 2025-04-07T07:58:50Z

packages/create-plugin/templates/common/.config/webpack/webpack.config.ts

@@ -9,6 +9,7 @@ import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import path from 'path';
+// @ts-expect-error Plugin is not typed


How about we type it with a .d.ts file in .config/types directory?

declare module 'replace-in-file-webpack-plugin' { import { Compiler } from 'webpack'; interface ReplaceRule { search: string | RegExp; replace: string | ((match: string) => string); } interface ReplaceOption { dir?: string; files?: string[]; test?: RegExp | RegExp[]; rules: ReplaceRule[]; } class ReplaceInFilePlugin { constructor(options?: ReplaceOption[]); options: ReplaceOption[]; apply(compiler: Compiler): void; } export = ReplaceInFilePlugin; }

As soon as I do this locally, the base Webpack config blows up with a bunch of errors -- it looks like @types/webpack-livereload-plugin has a dependency of @types/webpack@4, which this ends up pulling in somehow and TS then does not agree that the types match for plugins.

We can probably roll our own types for that as well based on what definitely-typed has:

declare module 'webpack-livereload-plugin' { import { ServerOptions } from 'https'; import { Compiler, Plugin, Stats, Compilation } from 'webpack'; interface Options extends Pick<ServerOptions, 'cert' | 'key' | 'pfx'> { /** * protocol for livereload `<script>` src attribute value * @default protocol of the page, either `http` or `https` */ protocol?: string | undefined; /** * The desired port for the livereload server. * If you define port 0, an available port will be searched for, starting from 35729. * @default 35729 */ port?: number | undefined; /** * he desired hostname for the appended `<script>` (if present) to point to * @default hostname of the page, like `localhost` or 10.0.2.2 */ hostname?: string | undefined; /** * livereload `<script>` automatically to `<head>`. * @default false */ appendScriptTag?: boolean | undefined; /** * RegExp of files to ignore. Null value means ignore nothing. * It is also possible to define an array and use multiple anymatch patterns */ ignore?: RegExp | RegExp[] | null | undefined; /** * amount of milliseconds by which to delay the live reload (in case build takes longer) * @default 0 */ delay?: number | undefined; /** * create hash for each file source and only notify livereload if hash has changed * @default false */ useSourceHash?: boolean | undefined; } class LiveReloadPlugin extends Plugin { readonly isRunning: boolean; constructor(options?: Options); apply(compiler: Compiler): void; start(watching: any, cb: () => void): void; done(stats: Stats): void; failed(): void; autoloadJs(): string; scriptTag(source: string): string; applyCompilation(compilation: Compilation): void; } export = LiveReloadPlugin; }

Doing that locally seems to then get all the types synced again with @types/webpack-livereload-plugin uninstalled.

As soon as I do this locally, the base Webpack config blows up with a bunch of errors -- it looks like @types/webpack-livereload-plugin has a dependency of @types/webpack@4, which this ends up pulling in somehow and TS then does not agree that the types match for plugins.

Where are you testing this @MattIPv4 ? I've tried adding both the replace-in-file-webpack-plugin.d.ts and installed @types/webpack-livereload-plugin with a plugin and I'm not seeing any errors. 🤔

I'm testing in https://github.com/grafana/grafana-setupguide-app -- as soon as I add that .d.ts, TS doesn't like the Webpack config:

pnpm why @types/webpack devDependencies: @types/webpack-livereload-plugin 2.3.6 └── @types/webpack 4.41.40

pnpm typecheck > [email protected] typecheck /Users/mattcowley/GitHub/grafana/grafana-setupguide-app > tsc --noEmit .config/webpack/webpack.config.ts:194:7 - error TS2322: Type 'VirtualModulesPlugin' is not assignable to type 'false | "" | 0 | WebpackPluginInstance | ((this: Compiler, compiler: Compiler) => void) | null | undefined'. Type 'VirtualModulesPlugin' is not assignable to type 'WebpackPluginInstance'. Types of property 'apply' are incompatible. Type '(compiler: import("/Users/mattcowley/GitHub/grafana/grafana-setupguide-app/node_modules/.pnpm/@[email protected]/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("/Users/mattcowley/GitHub/grafana/grafana-setupguide-app/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/webpack/types").Compiler) => void'. Types of parameters 'compiler' and 'compiler' are incompatible. Type 'Compiler' is missing the following properties from type 'Compiler': _pluginCompat, _plugins, plugin, apply, and 17 more. 194 virtualPublicPath, ~~~~~~~~~~~~~~~~~ .config/webpack/webpack.config.ts:243:7 - error TS2322: Type 'ESLintWebpackPlugin | ForkTsCheckerWebpackPlugin | LiveReloadPlugin' is not assignable to type 'false | "" | 0 | WebpackPluginInstance | ((this: Compiler, compiler: Compiler) => void) | null | undefined'. Type 'LiveReloadPlugin' is not assignable to type 'false | "" | 0 | WebpackPluginInstance | ((this: Compiler, compiler: Compiler) => void) | null | undefined'. Type 'LiveReloadPlugin' is not assignable to type 'WebpackPluginInstance'. Types of property 'apply' are incompatible. Type '(compiler: import("/Users/mattcowley/GitHub/grafana/grafana-setupguide-app/node_modules/.pnpm/@[email protected]/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("/Users/mattcowley/GitHub/grafana/grafana-setupguide-app/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/webpack/types").Compiler) => void'. Types of parameters 'compiler' and 'compiler' are incompatible. Type 'Compiler' is missing the following properties from type 'Compiler': _pluginCompat, _plugins, plugin, apply, and 17 more. 243 ...(env.development ~~~~~~~~~~~~~~~~~~~ 244 ? [ ~~~~~~~~~~~ ... 257 ] ~~~~~~~~~~~ 258 : []), ~~~~~~~~~~~~~ Found 2 errors in the same file, starting at: .config/webpack/webpack.config.ts:194

MattIPv4 added 5 commits April 4, 2025 02:47

Avoid name shadowing in webpack utils

4973d3a

Fix missing reduce type in webpack utils (TS7053)

f4f20b0

Fix missing request arg type in webpack config (TS7006)

8659187

Fix missing env arg type in webpack config (TS7006)

f3982b9

FIx missing module types in webpack config (TS7016)

38e7f47

MattIPv4 requested a review from a team as a code owner April 4, 2025 02:02

MattIPv4 requested a review from Ukochka April 4, 2025 02:02

github-project-automation bot added this to Plugins Platform / Grafana Community Apr 4, 2025

github-project-automation bot moved this to 📬 Triage in Plugins Platform / Grafana Community Apr 4, 2025

MattIPv4 added create-plugin related to the create-plugin tool patch Increment the patch version when merged release Create a release when this pr is merged labels Apr 4, 2025

hugohaggmark reviewed Apr 4, 2025

View reviewed changes

packages/create-plugin/templates/common/.config/webpack/webpack.config.ts Show resolved Hide resolved

Use Record<...> instead of {...} for Env

ec86158

Co-authored-by: Hugo Häggmark <[email protected]>

MattIPv4 commented Apr 4, 2025

View reviewed changes

packages/create-plugin/templates/common/.config/webpack/webpack.config.ts Outdated Show resolved Hide resolved

Env doesn't generate false, only 'false'

088e04c

hugohaggmark moved this from 📬 Triage to 🔬 In review in Plugins Platform / Grafana Community Apr 4, 2025

MattIPv4 added 2 commits April 4, 2025 22:23

Prettier formatting for webpack utils

c70e257

Revert Env back to {...} to avoid circular reference TS error (TS…

069e7b5

…2456)

leventebalogh previously approved these changes Apr 7, 2025

View reviewed changes

packages/create-plugin/templates/common/.config/webpack/utils.ts Outdated Show resolved Hide resolved

jackw reviewed Apr 7, 2025

View reviewed changes

Use generic for record type in webpack utils

d456d5f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: create-plugin common Webpack config types #1680

Fix: create-plugin common Webpack config types #1680

MattIPv4 commented Apr 4, 2025 •

edited by grafana-plugins-platform-bot bot

Loading

CLAassistant commented Apr 4, 2025 •

edited

Loading

github-actions bot commented Apr 4, 2025 •

edited

Loading

hugohaggmark left a comment

leventebalogh left a comment

jackw Apr 7, 2025

MattIPv4 Apr 7, 2025

MattIPv4 Apr 7, 2025 •

edited

Loading

jackw Apr 8, 2025

MattIPv4 Apr 8, 2025 •

edited

Loading

Fix: create-plugin common Webpack config types #1680

Are you sure you want to change the base?

Fix: create-plugin common Webpack config types #1680

Conversation

MattIPv4 commented Apr 4, 2025 • edited by grafana-plugins-platform-bot bot Loading

CLAassistant commented Apr 4, 2025 • edited Loading

github-actions bot commented Apr 4, 2025 • edited Loading

hugohaggmark left a comment

Choose a reason for hiding this comment

leventebalogh left a comment

Choose a reason for hiding this comment

jackw Apr 7, 2025

Choose a reason for hiding this comment

MattIPv4 Apr 7, 2025

Choose a reason for hiding this comment

MattIPv4 Apr 7, 2025 • edited Loading

Choose a reason for hiding this comment

jackw Apr 8, 2025

Choose a reason for hiding this comment

MattIPv4 Apr 8, 2025 • edited Loading

Choose a reason for hiding this comment

MattIPv4 commented Apr 4, 2025 •

edited by grafana-plugins-platform-bot bot

Loading

CLAassistant commented Apr 4, 2025 •

edited

Loading

github-actions bot commented Apr 4, 2025 •

edited

Loading

MattIPv4 Apr 7, 2025 •

edited

Loading

MattIPv4 Apr 8, 2025 •

edited

Loading