Switch from webpack to rspack for bundling

[jtpio]

References

#15035

List of supported webpack plugins: https://www.rspack.dev/plugins/webpack/

Code changes

• Use rspack instead of webpack for bundling
• Update various webpack.config.js to rspack.config.js. Or keep the existing webpack.config.js and use rspack --config
• Update to newer @rspack/cli and @rspack/core when a new version is released, to grab the fix for [Feature]: add support for generator.dataUrl as a function in loader config web-infra-dev/rspack#5640
• Check license-webpack-plugin works as expected. Normally it should be supported: https://www.rspack.dev/blog/announcing-0.2#license-webpack-plugin
• Check if we need @type/webpack-sources: fix: fix: remove @types/webpack-sources and add declaration of webpack-sources (close: #5867) web-infra-dev/rspack#5868
• Fix watch mode
• Fix Mathjax warnings:

WARNING in ./node_modules/@jupyterlab/mathjax-extension/style/fonts.css
  ⚠ Module parse warning:
  ╰─▶   ⚠ css: Deprecated '~'
        │ '@import' or 'url()' with a request starts with '~' is deprecated.

• Use the default Rspack experiments.css (set to true by default), or keep the current css-loader, style-loader, mini-css-extract-plugin. Might need support mini-css-extract-plugin  web-infra-dev/rspack#3210
• Update extension migration guide
• Update more docs?

User-facing changes

None

Backwards-incompatible changes

Should be none for most users and administrators using a stock JupyterLab with prebuilt extensions. Rspack supports module federation so existing extensions are compatible with JupyterLab built with Rspack and don't need to be updated.

Below is a screenshot showing JupyterLab running in dev mode from this branch, picking up the jupyterlab-execute-time prebuilt extension:

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[jtpio]

Opening early to:

• Check what might not be working yet. For now there is [Feature]: add support for generator.dataUrl as a function in loader config web-infra-dev/rspack#5640, but it has been fixed (but not yet released)
• Check if this might help with faster builds on CI
• Check if this could help the Binder not go out of memory

[jtpio]

Some first numbers running jlpm build:dev:prod:release:

rspack

webpack

[erkin98]

Hi @jtpio , how to migrate custom widget library with custom webpack.config.js?

[jtpio]

• Use the default Rspack experiments.css (set to true by default), or keep the current css-loader, style-loader, mini-css-extract-plugin. Might need support mini-css-extract-plugin web-infra-dev/rspack#3210

Rspack 0.6.0 now supports it: https://www.rspack.dev/blog/announcing-0.6.html#built-in-support-for-mini-css-extract-plugin

[FoSuCloud]

@jtpio I want to join your work, should I continue contributing to the jupyterlab-rspack project?

[jtpio]

Thanks @FoSuCloud!

https://github.com/jtpio/jupyterlab-rspack might be lagging a bit behind now. Maybe we could work on this PR directly instead? If you are able to open PRs against this branch I would be happy to merge your contributions.

There are still a few items listed in the top comment that we should check / re-enable, that can serve as a good starting point for continuing this work.

Thank you again for offering your help!

[jtpio]

Hi @jtpio , how to migrate custom widget library with custom webpack.config.js?

@erkin98 for now this is not ready yet. But hopefully the custom webpack.config.js should still be compatible with Rspack (or we should make it possible to use the same config). Would you be able to share the config here or in #15035?

[jtpio]

Looks like updating to the Rspack 0.6.1 release introduces the following error in the dev tools console:

[xc2]

Looks like updating to the Rspack 0.6.1 release introduces the following error in the dev tools console:

web-infra-dev/rspack#6230 this might be the same cause. Could you please try out the nightly version?

---

seems not help

---

the current nightly version 0.6.1-canary-73a9832-20240414004901 should help

[jtpio]

Thanks @xc2 for chiming in!

Also updating to the latest 0.6.2 seems to be giving this issue:

../node_modules/@rspack/binding/binding.d.ts:36:47 - error TS2552: Cannot find name 'PathData'. Did you mean 'JsPathData'?
36   getAssetPath(filename: string | ((pathData: PathData, assetInfo?: JsAssetInfo) => string), data: JsPathData): string
                                                 ~~~~~~~~
../node_modules/@rspack/binding/binding.d.ts:37:55 - error TS2552: Cannot find name 'PathData'. Did you mean 'JsPathData'?
37   getAssetPathWithInfo(filename: string | ((pathData: PathData, assetInfo?: JsAssetInfo) => string), data: JsPathData): PathWithInfo
                                                         ~~~~~~~~

[xc2]

Thanks @xc2 for chiming in!

Also updating to the latest 0.6.2 seems to be giving this issue:

../node_modules/@rspack/binding/binding.d.ts:36:47 - error TS2552: Cannot find name 'PathData'. Did you mean 'JsPathData'?
36   getAssetPath(filename: string | ((pathData: PathData, assetInfo?: JsAssetInfo) => string), data: JsPathData): string
                                                 ~~~~~~~~
../node_modules/@rspack/binding/binding.d.ts:37:55 - error TS2552: Cannot find name 'PathData'. Did you mean 'JsPathData'?
37   getAssetPathWithInfo(filename: string | ((pathData: PathData, assetInfo?: JsAssetInfo) => string), data: JsPathData): PathWithInfo
                                                         ~~~~~~~~

Thanks!

@ahabhgk fixes it in web-infra-dev/rspack#6265

please try 0.6.2-canary-4b8f4a6-20240417094517

[jtpio]

Status update: there seems to be only 3 failing CI checks remaining:

• Examples: there is likely something to change in the config, but I don't recall seeing this one with webpack: https://github.com/jupyterlab/jupyterlab/actions/runs/8800121988/job/24150649101?pr=16005

ERROR in × Conflict: Multiple assets emit different content to the same filename bundle.js

• UI tests:
  • 3 failing checks in the documentation tests related to the Mathjax fonts not loaded correctly?
  • Main UI tests: 4 failing checks, also related to some CSS differences:

diff-mathjax-rspack.webm

rspack-failing-ui-tests.webm

There is also still some commented code related to the watch mode, and our use of license-webpack-plugin (listed in the top comment), still to be fixed.

[jtpio]

@FoSuCloud I just posted a summary of where we currently are with the latest updates on this PR: #16005 (comment). In case you would still like to help with this, that would be really appreciated, thanks!

[FoSuCloud]

@FoSuCloud I just posted a summary of where we currently are with the latest updates on this PR: #16005 (comment). In case you would still like to help with this, that would be really appreciated, thanks!

I would be happy to contribute to this, thank you very much for the invitation

[jtpio]

Thanks @FoSuCloud! I rebased the PR to fix the conflicts.

[jtpio]

Ah, 0.6.4 seems to be failing with the following error (in https://github.com/jupyterlab/jupyterlab/actions/runs/8987878993/job/24687416227?pr=16005):

Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues
      Message:  index out of bounds: the len is 2 but the index is 2
      Location: crates/rspack_plugin_javascript/src/utils/eval/eval_tpl_expr.rs:44

      Run with COLORBT_SHOW_HIDDEN=1 environment variable to disable frame filtering.
      Run with RUST_BACKTRACE=full to include source snippets.

cc @xc2 who may know what the issue could be?

[chenjiahan]

@ahabhgk can you help to check this Rspack panic ❤️

[xc2]

Ah, 0.6.4 seems to be failing with the following error (in https://github.com/jupyterlab/jupyterlab/actions/runs/8987878993/job/24687416227?pr=16005):

Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues
      Message:  index out of bounds: the len is 2 but the index is 2
      Location: crates/rspack_plugin_javascript/src/utils/eval/eval_tpl_expr.rs:44

      Run with COLORBT_SHOW_HIDDEN=1 environment variable to disable frame filtering.
      Run with RUST_BACKTRACE=full to include source snippets.

cc @xc2 who may know what the issue could be?

I have tested both versions 0.6.4 and 0.6.5, and found that the panic is gone in 0.6.5.

It should have been fixed in web-infra-dev/rspack#6473.

Btw, if you got type error regarding @rspack/core/dist/config/zod.d.ts with 0.6.5, please temporarily enable the skipLibCheck option in tsconfig.json

[jtpio]

Thanks!

Btw, if you got type error regarding @rspack/core/dist/config/zod.d.ts with 0.6.5, please temporarily enable the
skipLibCheck option in tsconfig.json

Yes, just noticed it after updating to 0.6.5:

[jtpio]

TODO: remove

[jtpio]

Ah it looks like there is a Segmentation fault again with the latest releases:

https://github.com/jupyterlab/jupyterlab/actions/runs/9500757565/job/26184590724?pr=16005

[jtpio]

It looks like 0.7.4 fixed the segmentation fault issue reported above:

[jtpio]

For reference, Rspack 1.0 is now available: https://rspack.dev/blog/announcing-1-0

[krassowski]

Building an Jupyter frontend application with rspack 1.0 which includes a large part of the core I saw a speedup from 140s to 12-14s so a full order of magnitude. That said, it initially crashed with a cryptic error messagewhen there was something wrong in my rspack config so there are still some trade-offs.

[jtpio]

That said, it initially crashed with a cryptic error messagewhen there was something wrong in my rspack config so there are still some trade-offs.

Do you recall what issue it was in the config? The Rspack devs who commented on this PR have been really helpful so far and helped fix some issues. Maybe we could report it to them?