Alternate bundler: use equivalent native plugins for built-in plugins (#77355)

While we won’t use native plugins for equivalents of Next.js specific
plugins, we should use these for equivalents of built-in plugins like
`ProvidePlugin`, `IgnorePlugin`, and `EntryPlugin`. Otherwise, Rspack
behaves unexpectedly.

Test Plan: Successfully build `@formbricks/web`

Author: wbinnssmith

packages/next/src/build/compiler.ts

@@ -1,5 +1,6 @@
-import { webpack } from 'next/dist/compiled/webpack/webpack'
+import type { webpack } from 'next/dist/compiled/webpack/webpack'
 import type { Span } from '../trace'
+import getWebpackBundler from '../shared/lib/get-webpack-bundler'
 
 export type CompilerResult = {
   errors: webpack.StatsError[]
@@ -51,7 +52,8 @@ export function runCompiler(
   ]
 > {
   return new Promise((resolve, reject) => {
-    const compiler = webpack(config)
+    const compiler = getWebpackBundler()(config)
+
     // Ensure we use the previous inputFileSystem
     if (inputFileSystem) {
       compiler.inputFileSystem = inputFileSystem

packages/next/src/build/webpack-config.ts

@@ -95,6 +95,7 @@ import {
 } from './next-dir-paths'
 import { getRspackCore, getRspackReactRefresh } from '../shared/lib/get-rspack'
 import { RspackProfilingPlugin } from './webpack/plugins/rspack-profiling-plugin'
+import getWebpackBundler from '../shared/lib/get-webpack-bundler'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 type ClientEntries = {
@@ -341,6 +342,7 @@ export default async function getBaseWebpackConfig(
     fetchCacheKeyPrefix?: string
   }
 ): Promise<webpack.Configuration> {
+  const bundler = getWebpackBundler()
   const isClient = compilerType === COMPILER_NAMES.client
   const isEdgeServer = compilerType === COMPILER_NAMES.edgeServer
   const isNodeServer = compilerType === COMPILER_NAMES.server
@@ -1870,7 +1872,7 @@ export default async function getBaseWebpackConfig(
     },
     plugins: [
       isNodeServer &&
-        new webpack.NormalModuleReplacementPlugin(
+        new bundler.NormalModuleReplacementPlugin(
           /\.\/(.+)\.shared-runtime$/,
           function (resource) {
             const moduleName = path.basename(
@@ -1902,7 +1904,7 @@ export default async function getBaseWebpackConfig(
           : new ReactRefreshWebpackPlugin(webpack)),
       // Makes sure `Buffer` and `process` are polyfilled in client and flight bundles (same behavior as webpack 4)
       (isClient || isEdgeServer) &&
-        new webpack.ProvidePlugin({
+        new bundler.ProvidePlugin({
           // Buffer is used by getInlineScriptSource
           Buffer: [require.resolve('buffer'), 'Buffer'],
           // Avoid process being overridden when in web run time
@@ -1952,7 +1954,7 @@ export default async function getBaseWebpackConfig(
       // solution that requires the user to opt into importing specific locales.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       config.excludeDefaultMomentLocales &&
-        new webpack.IgnorePlugin({
+        new bundler.IgnorePlugin({
           resourceRegExp: /^\.\/locale$/,
           contextRegExp: /moment$/,
         }),
@@ -1969,14 +1971,14 @@ export default async function getBaseWebpackConfig(
             ]
 
             if (isClient || isEdgeServer) {
-              devPlugins.push(new webpack.HotModuleReplacementPlugin())
+              devPlugins.push(new bundler.HotModuleReplacementPlugin())
             }
 
             return devPlugins
           })()
         : []),
       !dev &&
-        new webpack.IgnorePlugin({
+        new bundler.IgnorePlugin({
           resourceRegExp: /react-is/,
           contextRegExp: /next[\\/]dist[\\/]/,
         }),

packages/next/src/build/webpack/plugins/define-env-plugin.ts

@@ -3,13 +3,13 @@ import type {
   NextConfigComplete,
 } from '../../../server/config-shared'
 import type { MiddlewareMatcher } from '../../analysis/get-page-static-info'
-import { webpack } from 'next/dist/compiled/webpack/webpack'
 import { needsExperimentalReact } from '../../../lib/needs-experimental-react'
 import { checkIsAppPPREnabled } from '../../../server/lib/experimental/ppr'
 import {
   getNextConfigEnv,
   getNextPublicEnvironmentVariables,
 } from '../../../lib/static-env'
+import getWebpackBundler from '../../../shared/lib/get-webpack-bundler'
 
 type BloomFilter = ReturnType<
   import('../../../shared/lib/bloom-filter').BloomFilter['export']
@@ -293,5 +293,5 @@ export function getDefineEnv({
 }
 
 export function getDefineEnvPlugin(options: DefineEnvPluginOptions) {
-  return new webpack.DefinePlugin(getDefineEnv(options))
+  return new (getWebpackBundler().DefinePlugin)(getDefineEnv(options))
 }

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -49,6 +49,7 @@ import {
 } from '../../../lib/metadata/is-metadata-route'
 import type { MetadataRouteLoaderOptions } from '../loaders/next-metadata-route-loader'
 import type { FlightActionEntryLoaderActions } from '../loaders/next-flight-action-entry-loader'
+import getWebpackBundler from '../../../shared/lib/get-webpack-bundler'
 
 interface Options {
   dev: boolean
@@ -784,6 +785,7 @@ export class FlightClientEntryPlugin {
     addRSCEntryPromise: Promise<void>,
     ssrDep: ReturnType<typeof webpack.EntryPlugin.createDependency>,
   ] {
+    const bundler = getWebpackBundler()
     let shouldInvalidate = false
 
     const modules = Object.keys(clientImports)
@@ -853,12 +855,12 @@ export class FlightClientEntryPlugin {
       pluginState.injectedClientEntries[bundlePath] = clientBrowserLoader
     }
 
-    const clientComponentSSREntryDep = webpack.EntryPlugin.createDependency(
+    const clientComponentSSREntryDep = bundler.EntryPlugin.createDependency(
       clientServerLoader,
       { name: bundlePath }
     )
 
-    const clientComponentRSCEntryDep = webpack.EntryPlugin.createDependency(
+    const clientComponentRSCEntryDep = bundler.EntryPlugin.createDependency(
       clientServerLoader,
       { name: bundlePath }
     )
@@ -897,6 +899,7 @@ export class FlightClientEntryPlugin {
     createdActionIds: Set<string>
     fromClient?: boolean
   }) {
+    const bundler = getWebpackBundler()
     const actionsArray = Array.from(actions.entries())
     for (const [, actionsFromModule] of actions) {
       for (const { id } of actionsFromModule) {
@@ -939,7 +942,7 @@ export class FlightClientEntryPlugin {
     }
 
     // Inject the entry to the server compiler
-    const actionEntryDep = webpack.EntryPlugin.createDependency(actionLoader, {
+    const actionEntryDep = bundler.EntryPlugin.createDependency(actionLoader, {
       name: bundlePath,
     })
 

packages/next/src/server/dev/hot-reloader-webpack.ts

@@ -6,7 +6,7 @@ import type { IncomingMessage, ServerResponse } from 'http'
 import type { UrlObject } from 'url'
 import type { RouteDefinition } from '../route-definitions/route-definition'
 
-import { webpack, StringXor } from 'next/dist/compiled/webpack/webpack'
+import { type webpack, StringXor } from 'next/dist/compiled/webpack/webpack'
 import {
   getOverlayMiddleware,
   getSourceMapMiddleware,
@@ -86,6 +86,7 @@ import { getNodeDebugType } from '../lib/utils'
 import { getNextErrorFeedbackMiddleware } from '../../client/components/react-dev-overlay/server/get-next-error-feedback-middleware'
 import { getDevOverlayFontMiddleware } from '../../client/components/react-dev-overlay/font/get-dev-overlay-font-middleware'
 import { getDisableDevIndicatorMiddleware } from './dev-indicator-middleware'
+import getWebpackBundler from '../../shared/lib/get-webpack-bundler'
 
 const MILLISECONDS_IN_NANOSECOND = BigInt(1_000_000)
 
@@ -735,7 +736,8 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
       ).client,
       ...info,
     })
-    const fallbackCompiler = webpack(fallbackConfig)
+
+    const fallbackCompiler = getWebpackBundler()(fallbackConfig)
 
     this.fallbackWatcher = await new Promise((resolve) => {
       let bootedFallbackCompiler = false
@@ -1136,7 +1138,7 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
     // @ts-ignore webpack 5
     this.activeWebpackConfigs.parallelism = 1
 
-    this.multiCompiler = webpack(
+    this.multiCompiler = getWebpackBundler()(
       this.activeWebpackConfigs
     ) as unknown as webpack.MultiCompiler
 

packages/next/src/shared/lib/get-webpack-bundler.ts

@@ -0,0 +1,12 @@
+import { webpack } from 'next/dist/compiled/webpack/webpack'
+import { getRspackCore } from './get-rspack'
+
+/**
+ * Depending on if Rspack is active or not, returns the appropriate set of
+ * webpack-compatible api.
+ *
+ * @returns webpack bundler
+ */
+export default function getWebpackBundler(): typeof webpack {
+  return process.env.NEXT_RSPACK ? getRspackCore() : webpack
+}