[Feature Request]: Potential Next.js support options

[zackarychapple]

What problem does this feature solve?

There are a lot of people who would be interested in using Next.js with Rspack. Today @ScriptedAlchemy and I were digging into it. @valorkin pointed out to us that we can use NEXT_PRIVATE_LOCAL_WEBPACK to replace the webpack config. Additionally we can alias webpack to Rspack via the package manager. This gets us to the object.assign that is being done in the webpack.js. It seems that if we can expose the bindings and resolve these assigns to Rspack we may be able to get Rspack building Next.js.

BasicEvaluatedExpression: require('webpack/lib/javascript/BasicEvaluatedExpression'),
ModuleFilenameHelpers: require('webpack/lib/ModuleFilenameHelpers'),
NodeTargetPlugin: require('webpack/lib/node/NodeTargetPlugin'),
StringXor: require('webpack/lib/util/StringXor'),
NormalModule: require('webpack/lib/NormalModule'),
sources: require('webpack').sources,
webpack: require('webpack')

Any thoughts @hardfist?

What does the proposed API of configuration look like?

Surface the above hooks and internal plugins as a binding that can be found on the root Rspack object or another interface that is specified and accessible.

[ScriptedAlchemy]

There is likely some additional internal plugins/hooks next would use - but these bindings would be the initial requirement to better understand whats needed/missing

[zackarychapple]

There is likely some additional internal plugins/hooks next would use - but these bindings would be the initial requirement to better understand whats needed/missing

Correct, this would get us past the initial crashing to see what individual hooks are being used.

[hardfist]

I actually did try port next.js on rspack with @ijjk and I don't think it's possible to port next.js on rspack without modifying lots of next.js code, and since next.js is betting on turbopack right now i think it's low priority to run next.js on rspack right now, we may revisit this issue after rspack supports more and more hooks & api.

[ScriptedAlchemy]

As workaround, we can call a childCompiler in next webpack & disable parser of a large segment of the codebase, then one could hook into additionalAssets to pass it through next/webpack haha.

[zmzlois]

As workaround, we can call a childCompiler in next webpack & disable parser of a large segment of the codebase, then one could hook into additionalAssets to pass it through next/webpack haha.

I was looking into how to build a monorepo includes three nextjs apps using rspack today following a conference talk in CityJS London delivered by @ScriptedAlchemy

But didn't find any migration guide out of the box, wondering what a workaround for this as @ScriptedAlchemy mentioned would look like? Is Rspack by default focusing on supporting developers based in China and must use modern.js?

[zmzlois]

As of 3rd April, 2023, create-react-app has been removed from the official react documentation after this pr and the official recommendation is default to

create-next-app

create-gatsby

create-expo-app

seen here

[ScriptedAlchemy]

Gatsby has a beta with rspack, so that's one down!

Next is harder and controlled by vercel. We can't change next.js source. Other projects want to use rspack.

I do think that there is a niche application for this exact type of problem though. For instance, supporting module federation in next.
As a workaround, I'm drawing on a similar strategy I used in next.

Imagine a RspackWebpackPlugin() - this plugin would disable webpack parser, effectively turning off code processing.

Webpack would pass it's options to rspack and rspack would bind all its hooks back to webpacks api. So webpack itself wouldn't do much work (the slow parts) I'd try to make webpack emit the work of rspack.

It's a huge hack. But might work for stubborn cases, like next.

CRA was removed but it's still maintained and we do support it.

Expo is react native I think? We have nativescript I think, so rspack might have enough hooks available to support a react native build.
To support react native, we would use callstack/repack plugin and see if it works with rspack. Expo is it's own build tool - but I get what you're pointing out. Market penetration on these big frameworks.

I'll create a issue for repack investigation.

[zackarychapple]

@zmzlois interestingly enough @hardfist has a repo that he has that shows how to convert CRA to Rspack, that will take care of part of it. I believe with that information @juristr may be able to get the Nx CRA sample moved to Rspack as well.

As @ScriptedAlchemy mentioned @pieh has a PR where they are exploring Rspack support and are close. There is a tracking issue where @ahabhgk is tracking progress.

Have not talked to anyone on the Expo, however it would be great to see how we can help get them onto Rspack.

[zackarychapple]

We have nativescript I think, so rspack might have enough hooks available to support a react native build.

There is a few hooks needed for NativeScript, however I believe some have landed. Maybe @edusperoni can check again after we land everything for Angular. They were blocked by similar hooks.

[jkzing]

Is Rspack by default focusing on supporting developers based in China and must use modern.js?

@zmzlois No, that's not accurate. Modern.js is simply a framework that utilizes Rspack as its bundler, like what Gatsby does. It's important to note that both Modern.js and Rspack are global projects and not only focusing on supporting developers in China.