fix(rspack): use ts-checker-rspack-plugin
#32115
Conversation
|
|
WalkthroughThe changes replace the usage of the Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/webpack/src/configs/client.ts (1)
128-138: Consistent implementation with server.ts.The conditional logic mirrors the changes in server.ts, ensuring consistent behaviour across both client and server configurations. This approach properly handles TypeScript type checking for both Webpack and rspack-based builds.
The use of
@ts-expect-erroris again acceptable as an interim solution, though resolving the underlying type issues would be preferable in the long term.Consider creating a shared utility function for both client and server configurations to reduce code duplication. For example:
// In a shared utils file +export function addTypeCheckerPlugin(config: any, options: { builder: string, logger: any }) { + if (options.builder === '@nuxt/rspack-builder') { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + config.plugins!.push(new TsCheckerRspackPlugin({ + logger: options.logger, + })) + } else { + config.plugins!.push(new ForkTSCheckerWebpackPlugin({ + logger: options.logger, + })) + } +} // Then in both client.ts and server.ts -if (ctx.nuxt.options.builder === '@nuxt/rspack-builder') { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - ctx.config.plugins!.push(new TsCheckerRspackPlugin({ - logger, - })) -} else { - ctx.config.plugins!.push(new ForkTSCheckerWebpackPlugin({ - logger, - })) -} +addTypeCheckerPlugin(ctx.config, { + builder: ctx.nuxt.options.builder, + logger +})
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/rspack/package.jsonis excluded by!**/package.jsonpackages/webpack/package.jsonis excluded by!**/package.jsonpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yaml
📒 Files selected for processing (2)
packages/webpack/src/configs/client.ts(2 hunks)packages/webpack/src/configs/server.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: codeql (javascript-typescript)
- GitHub Check: build
- GitHub Check: code
🔇 Additional comments (3)
packages/webpack/src/configs/server.ts (2)
4-4: Good addition of the required import.The import of
TsCheckerRspackPluginis correctly added to support the use of rspack builder without Webpack dependencies.
101-111: Proper implementation of conditional plugin selection.The conditional logic appropriately selects the right TypeScript type-checking plugin based on the builder configuration. This is essential to fix the rspack builder startup failure by removing the Webpack dependency when using rspack.
The use of
@ts-expect-errorannotation is acceptable as a temporary solution, but ideally, the type issues should be resolved more permanently in the future.Could you verify if this approach works correctly by testing the rspack builder without Webpack installed? This would help confirm that the dependency issue is fully resolved.
packages/webpack/src/configs/client.ts (1)
7-7: Good addition of the required import.The import of
TsCheckerRspackPluginis correctly added to support rspack builder integration.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yaml
📒 Files selected for processing (5)
packages/rspack/builder.mjs(1 hunks)packages/webpack/builder.d.ts(1 hunks)packages/webpack/builder.mjs(1 hunks)packages/webpack/src/configs/client.ts(2 hunks)packages/webpack/src/configs/server.ts(2 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/webpack/builder.mjs
- packages/rspack/builder.mjs
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/webpack/src/configs/server.ts
- packages/webpack/src/configs/client.ts
🧰 Additional context used
🪛 Biome (1.9.4)
packages/webpack/builder.d.ts
[error] 8-8: Shouldn't redeclare 'MiniCssExtractPlugin'. Consider to delete it or rename it.
'MiniCssExtractPlugin' is defined here:
(lint/suspicious/noRedeclare)
[error] 9-9: Shouldn't redeclare 'TsCheckerPlugin'. Consider to delete it or rename it.
'TsCheckerPlugin' is defined here:
(lint/suspicious/noRedeclare)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: code
🔇 Additional comments (1)
packages/webpack/builder.d.ts (1)
4-4: Ensurefork-ts-checker-webpack-pluginremains a dependency
This declaration imports theTsCheckerPlugintype fromfork-ts-checker-webpack-plugin; if that package is removed or missing from yourpackage.json, TypeScript consumers of#builderwill break with “module not found” or missing type errors.Please verify that
fork-ts-checker-webpack-pluginis still listed underdependencies(orpeerDependencies) for the webpack builder package.
|
|
||
| export const webpack: typeof Webpack | ||
| export const WebpackBarPlugin: typeof import('webpackbar').default | ||
| export const MiniCssExtractPlugin: typeof MiniCssExtractPlugin | ||
| export const TsCheckerPlugin: typeof TsCheckerPlugin |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Type declaration now only covers the Webpack plugin
You’ve added export const TsCheckerPlugin: typeof TsCheckerPlugin which refers to the Webpack plugin type, but packages/rspack/builder.mjs exports a different class (TsCheckerRspackPlugin) under the same alias. This mismatch forces @ts-expect-error in your configs.
Suggest refactoring the declaration to encompass both implementations (e.g. a union type) or to split out per-builder definitions so the correct type is picked up without suppression.
Example union-based refactor:
-import type TsCheckerPlugin from 'fork-ts-checker-webpack-plugin'
+import type { TsCheckerPlugin as WebpackChecker } from 'fork-ts-checker-webpack-plugin'
+import type { TsCheckerPlugin as RspackChecker } from 'ts-checker-rspack-plugin'
-export const TsCheckerPlugin: typeof TsCheckerPlugin
+export type TsCheckerPlugin = typeof WebpackChecker | typeof RspackChecker
+export const TsCheckerPlugin: TsCheckerPlugin📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const TsCheckerPlugin: typeof TsCheckerPlugin | |
| // before: | |
| // import type TsCheckerPlugin from 'fork-ts-checker-webpack-plugin' | |
| // export const TsCheckerPlugin: typeof TsCheckerPlugin | |
| import type { TsCheckerPlugin as WebpackChecker } from 'fork-ts-checker-webpack-plugin' | |
| import type { TsCheckerPlugin as RspackChecker } from 'ts-checker-rspack-plugin' | |
| export type TsCheckerPlugin = typeof WebpackChecker | typeof RspackChecker | |
| export const TsCheckerPlugin: TsCheckerPlugin |
🧰 Tools
🪛 Biome (1.9.4)
[error] 9-9: Shouldn't redeclare 'TsCheckerPlugin'. Consider to delete it or rename it.
'TsCheckerPlugin' is defined here:
(lint/suspicious/noRedeclare)
🤖 Prompt for AI Agents
In packages/webpack/builder.d.ts at line 9, the type declaration for
TsCheckerPlugin only covers the Webpack plugin, but the same alias is used for a
different class in packages/rspack/builder.mjs, causing type mismatches and the
need for @ts-expect-error. Refactor this declaration to either use a union type
that includes both TsCheckerPlugin and TsCheckerRspackPlugin types or split the
type declarations into separate files per builder so that the correct type is
imported without suppressing errors.
@nuxt/kit
nuxt
@nuxt/schema
@nuxt/rspack-builder
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
CodSpeed Performance ReportMerging #32115 will not alter performanceComparing Summary
|
ts-checker-rspack-plugin
|
Thank you ❤️ |
🔗 Linked issue
No issue
📚 Description
Because before "fork-ts-checker-webpack-plugin" Webpack plugin dependencies Webpack when the user using @nuxt/rspack-builder must be install the Webpack5 .
So I used the "ts-checker-rspack-plugin" replace "fork-ts-checker-webpack-plugin".
But now I found the Type error in "webpack/configs/client.ts" and "webpack/configs/service.ts". I used the @ts-expect-error to solve them.