ref: web-infra-dev/rspack#2659

Related: web-infra-dev/rspack#2668

Unable to scroll the website using keyboard.

Environment:
OS: Windows 11
Browser: Chrome 110.0.5481.180

Hey! Just want to share some details that found on https://github.com/web-infra-dev/rspack-website/blob/main/docs/en/guide/migrate-from-cra.mdx#configure-rspackconfigjs section when trying to following it.

Found some extra spaces in these values:

• https://github.com/web-infra-dev/rspack-website/blob/main/docs/en/guide/migrate-from-cra.mdx?plain=1#L37
• https://github.com/web-infra-dev/rspack-website/blob/main/docs/en/guide/migrate-from-cra.mdx?plain=1#L42

Update: rspack only support copy-webpack-plugin@5

And the arg that is passed to the new CopyPlugin constructor, https://github.com/web-infra-dev/rspack-website/blob/main/docs/en/guide/migrate-from-cra.mdx?plain=1#L47, is different from what it is mentioned in https://webpack.js.org/plugins/copy-webpack-plugin/#options doc.

As a side note, when doing the changes for the plugin, i'm not able to run/build the project as it throws the next error:

> [email protected] build
> rspack build

[rspack-cli] [Error: napi error: GenericFailure - TypeError: compilation.getCache is not a function
    at /Users/***/Documents/projects/rspack-project/node_modules/copy-webpack-plugin/dist/index.js:693:33
    at Hook.eval (eval at create (/Users/***/Documents/projects/rspack-project/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/***/Documents/projects/rspack-project/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler._Compiler_newCompilation (/Users/***/Documents/projects/rspack-project/node_modules/@rspack/core/src/compiler.ts:358:30)
   0: _napi_register_module_v1
   1: <unknown>
   2: <unknown>
] {
  code: 'GenericFailure'
}

Tested too by creating a new app with npm create rspack@latest and get the same error when using the copy webpack plugin.

Btw, thank you for this great project!

What problem does this feature solve?

Note that it's more of a discussion than a feature request.

When I saw vue-rsloader, I know that this is a plugin migrated from vue-loader, and had some thoughts:

When a webpack loader or plugin cannot be used directly in Rspack, and we cannot also modify it directly, we must fork it and released a new NPM package, so we need a new name for it, If we don't make a naming convention, the final NPM name may have many styles, e.g. when the original name is foo-loader, the migrated would be:

• foo-rsloader
• foo-rspack-loader
• rspack-foo-loader

What does the proposed API of configuration look like?

IMO I preferred rspack-foo-loader, but the final decision need discussion from the core team and we need document it.

I'm thinking about fork create-react-app and change the internal webpack usage to rspack and publish a package called cra-rs, so cra-rs becomes a drop-in replacement of cra

the migration guide is too simple to guide real world application migration, there're following things we can do to simplify the migration process

Steps to reproduce:

1. Go to https://www.rspack.dev/.
2. Enable "dark" mode.
3. Hover on the Navbar items such as "About", "Ecosystem" or "Language" and you will see there is a white background applied.

Screenshots:
HoverIssue.pdf
HoverIssue2.pdf

Note:
It's an easy fix if Im able to run the local dev environment. Since this website uses Modern.js any help here would be highly appreciated.

What problem does this feature solve?

Just like webpack, it provide node api documents for us to custom pack logic.

What does the proposed API of configuration look like?

https://webpack.js.org/api/node

We need a document (or an index) to map the configuration differences between webpack and rspack, which will help developers migrate smoothly. (It may not be feasible to include every configuration, but the document should include most commonly used configurations.)

Some configurations that differ between the two need to be highlighted separately.
For example, with regards to the 'Externals' configuration, webpack supports multiple types, but rspack only supports Record<string, string>. This could leave the migration work unsure of how to proceed.

Some configuration documentations are too simple. I think it would be helpful to indicate what work is being done and what features will be supported in the future, such as cache.

这里多了一个空格

https://www.rspack.dev/guide/module-resolution.html

Home page

RoadMap

Guide

• Guide @hardfist
  • Installation guide
  • First Bundle
  • Use config file
  • Npm scripts
  • Create from template
  • Create from modernjs
• #4 @h-a-n-a
  • Builtin support
    • JavaScript/JSX
    • TypeScript/JSX
    • JSON
    • Asset Module
    • CSS Support
  • Extend via Plugin, loader
    • Less
    • Sass
    • HTML
    • #14
    • #35
• #5 @h-a-n-a
  • React
  • SolidJS
• devServer @ahabhgk
  • HMR
  • Proxy
• Optimization
  • Code Splitting, Bundle Splitting @hyf0
  • Tree Shaking @IWANABETHATGUY
  • JS Optimization @jerrykingxyz
  • Bundle Analysis @hardfist
• #10
  • Loader API(link)
  • Tutorial
  • Bulitin loader
  • Loader compat(link)
• #11
  • Plugin API(link)
  • Tutorial
  • Plugin compat(link)
• Deploy @hardfist

Configuration

• entry
• mode
• target
• context
• output
• resolve #20
• module
• builtins (mark as unstable)
  • #18
  • css,postcss @IWANABETHATGUY
  • #19
  • #32
  • no_emit_assets, progress @h-a-n-a
• #17
• #12
• #16
• #39
• devServer @ahabhgk
• #13
• #26
• experiments
• #45

API

• Node API @ahabhgk (on-hold)
• Runtime API @underfin
• #69
• Plugin API @hardfist
• DevServer API @hardfist
• #50

CLI @hardfist

• CLI commands

Glossary

Architecture @hyf0 @h-a-n-a

Migrating

• Migrate from webpack
• Modern-js integration(link) @9aoy
• Compat-page @ahabhgk
  • Loader
  • Plugin

Benchmark @IWANABETHATGUY @ahabhgk @chenjiahan

• Dev
• Build
• HMR

Blog @hardfist

• Release notes
• Technical notes

Showcase(Example) @chenjiahan

• Arco

English

• Avoid subjective adjectives as much as possible. e.g. "famously", "steeper".
• Avoid usage of "you" and "we". e.g. "we can tell Rspack", "If you wish to modify this behavior, you can use".

Chinese

• Avoid the usage of "we"
• Remove /change weird machine-translated jargons
• Add english jargon after the Chinese jargons, for example: 代码分割 (Code Splitting)

--

Use case-police to check cases.

--

I think most people will start with the question: "Can I switch my build to rspack?" because people opening the docs are the people who already knew what webpack is.
This means the compact table and migration guide should be moved to the top, or they should be mentioned and link at the top of the introduction and github README.

I have seen some people misunderstand the relationship between Mordern.js and Rspack. We should make declarations for all Rspack's partners.

What problem does this feature solve?

As a developer working on a vite project, I am suffering from its slow build process. I understand Rspack is initially targeting folks who use Webpack. However, it would be best if there is a official documentation on guiding migrate vite project towards Rspack

What does the proposed API of configuration look like?

Documentation request, no API.

          Well, it was kind of expected. The `browserlist-rs` SWC used doesn't support "extends" syntax.

You could see the limitation here: https://github.com/browserslist/browserslist-rs#limitations

Thanks for reporting. I think we need to improve the document to show the limitations😢.

Originally posted by @hyf0 in web-infra-dev/rspack#2832 (comment)

System Info

nope

Details

see on tail of letter G — tip cut off:

but in selected text all ok:

Reproduce link

No response

Reproduce Steps

open site https://www.rspack.dev/

Summary

Parsed result of mailto links will be prefixed with / so it will doesn't work and always jump to 404

Reproduction

Case 1

• Input:

✉️ [[email protected]](mailto:[email protected])

• Output:

Case 2

• Input:

<a href="mailto:[email protected]">[email protected]</a>

• Output:

give credits to all the contributors to rspack&rspack-website like https://vitest.dev/

Compatible with the architecture and ecology of webpack, no need to build the ecology from scratch

https://github.com/web-infra-dev/rspack/blob/main/crates/rspack_plugin_javascript/src/lib.rs#L77-L91 some of these options are not documented

See pull request:

• web-infra-dev/rspack#3211

How to Reproduce?
Open any browser, type "https://www.rspack.dev/zh/config/devserver" in the address bar, and the left-side navigation flickers and then disappears

OS & Browser Version

• macOS: 13.2.1 (22D68)
• Microsoft Edge: 110.0.1587.63

Reproduction

Open https://www.rspack.dev/ at mobile side:

// cc @sanyuan0704 @hardfist

It seems builtins.treeShaking is missing, although treeShaking has documented in Guide, but I think builtins.treeShaking is indispensable, because it indeed an option of builtins.