Support for workbox-webpack-plugin

[JoseBuendiaDigio]

What problem does this feature solve?

Use of workbox. We need this to have PWA

Now it's throwing an error

[webpack-dev-middleware] [Error: napi error: GenericFailure - Error: processAssets hook uses custom stage number is not supported.

What does the proposed API of configuration look like?

compatible with workbox-webpack-plugin

[jofravelo]

I would really like this implemented! 👍

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[ximing]

Is there a support plan in place?

[hardfist]

Is there a support plan in place?

try https://www.npmjs.com/package/workbox-rspack-plugin

[Clarkkkk]

Allow me to recommend my implementation @aaroon/workbox-rspack-plugin here. It is full featured and well tested. And it also tracks existed issues (#5194, #5908) related to rspack.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[hardfist]

workbox-webpack-plugin is officially supported now! you can check an example here https://github.com/rspack-contrib/rspack-examples/pull/107 ,if you met any problems you can reopen this issue

[MuTsunTsai]

@hardfist I'm still getting several errors as of the latest rspack version. In the following [Workspace] is where my project folder is.

Failed to compile, check the errors for troubleshooting.
× Error:   × TypeError: Cannot read properties of undefined (reading 'set')
  │   │     at Object.fn ([Workspace]\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]\node_modules\webpack\lib\EntryPlugin.js:35:37)
  │   │     at SyncHook.callAsyncStageRange ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:240:21)
  │   │     at SyncHook.callStageRange ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:259:14)
  │   │     at QueriedHook.call ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:218:26)
  │   │     at [Workspace]\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:572:244
  │   │     at last.function ([Workspace]\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:862:28)
  │   │
  │

× TypeError: Cannot read properties of undefined (reading 'source')
  │     at InjectManifest.addAssets ([Workspace]\node_modules\.pnpm\[email protected][email protected]_@[email protected]_@[email protected][email protected]_\node_modules\workbox-webpack-plugin\build\inject-manifest.js:223:39)
  │     at Object.fn ([Workspace]\node_modules\.pnpm\[email protected][email protected]_@[email protected]_@[email protected][email protected]_\node_modules\workbox-webpack-plugin\build\inject-manifest.js:106:31)
  │     at next ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:486:37)
  │     at AsyncSeriesHook.callAsyncStageRange ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:543:9)
  │     at [Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:86:18
  │     at new Promise (<anonymous>)
  │     at AsyncSeriesHook.promiseStageRange ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:85:16)
  │     at QueriedHook.promise ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:224:26)
  │     at [Workspace]\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:668:320
  │     at last.function ([Workspace]\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:862:28)

error   Failed to build.
error   Rspack build failed!
    at file:///[Workspace]/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.js:5206:20
    at finalCallback ([Workspace]\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:300:21)
    at [Workspace]\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:323:36
    at done ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:473:13)
    at promise.then.index ([Workspace]\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:493:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[birtles]

Probably not what you want but if workbox isn't working for you, I ported workbox's InjectManifestPlugin to rspack's native service worker support over in @birchill/inject-manifest-plugin.

[MuTsunTsai]

@birtles Oh, there is already @aaroon/workbox-rspack-plugin that works perfectly for now, but thanks anyway.

[birtles]

@birtles Oh, there is already @aaroon/workbox-rspack-plugin that works perfectly for now, but thanks anyway.

I tried that one but it didn't work for me with rspack's native service worker handling.

[MuTsunTsai]

@birtles It's not for the rspack native service worker indeed. It's a straight substitution for workbox-webpack-plugin and is used exactly the same way as the latter. So for example there is no additional setup required for the chunks, and navigator.serviceWorker.register will directly use string url "sw.js" etc. In order words, it's actually simpler (it will still build and bundle the service worker if needed).