Ability to modify/enhance default webpack handle externals

[augustjk]

Describe the feature you'd like to request

I'd like to be able to modify/enhance the webpack externals function below in a safe/stable way without fear of breakage.

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

Lines 1378 to 1429 in 412dfc5

	({
	context,
	request,
	dependencyType,
	contextInfo,
	getResolve,
	}: {
	context: string
	request: string
	dependencyType: string
	contextInfo: {
	issuer: string
	issuerLayer: string | null
	compiler: string
	}
	getResolve: (
	options: any
	) => (
	resolveContext: string,
	resolveRequest: string,
	callback: (
	err?: Error,
	result?: string,
	resolveData?: { descriptionFileData?: { type?: any } }
	) => void
	) => void
	}) =>
	handleExternals(
	context,
	request,
	dependencyType,
	contextInfo.issuerLayer,
	(options) => {
	const resolveFunction = getResolve(options)
	return (resolveContext: string, requestToResolve: string) =>
	new Promise((resolve, reject) => {
	resolveFunction(
	resolveContext,
	requestToResolve,
	(err, result, resolveData) => {
	if (err) return reject(err)
	if (!result) return resolve([null, false])
	const isEsm = /\.js$/i.test(result)
	? resolveData?.descriptionFileData?.type ===
	'module'
	: /\.mjs$/i.test(result)
	resolve([result, isEsm])
	}
	)
	})
	}
	),

We are working on a Next.js plugin/config wrapper that require webpack loader to be applied even for certain code in node_modules. In our case we want to grab any imports of react/jsx-runtime or react/jsx-dev-runtime to replace with our own version. Specifying the jsxImportSource is not enough as we'd like to also handle external components pre-compiled with the auto runtime jsx.

Describe the solution you'd like

I'm not entirely sure what the best ergonomics of this would be. Perhaps naming and exporting the server handle external functions linked above so the webpack.externals array can be checked to see whether it exists and write a modified version for it.

Describe alternatives you've considered

For now, I'm doing this within the webpack config function.

  if (isServer && nextRuntime === 'nodejs') {
    const nextHandleExternals = config.externals[0];
    config.externals = [
      (opt: {request: string}) => {
        if (
          opt.request === 'react/jsx-dev-runtime' ||
          opt.request === 'react/jsx-runtime'
        ) {
          // Returning empty promise makes these requests go through webpack
          return Promise.resolve();
        }
        return nextHandleExternals(opt);
      },
    ];
  }

I'm just afraid grabbing config.externals[0] will break in a future version.

[emolr]

This seems to have been broken since nextjs v13.4.20-canary.32.

From what i can see it because react/jsx-dev-runtime and react/jsx-runtime no longer being external but instead react is bundled together with nextjs. #55362

I would really love to see this resolved somehow, as it's a blocker for using eg. lit-element custom elements with nextjs ssr in the latest versions, but I just can't seem to find a way to monkey patch react anymore.

I'd love to hear some ideas I can use to debug it further

[augustjk]

Since everything is bundled as CJS, I have resorted to monkey-patching everything, including the runtime jsx functions. See https://github.com/lit/lit/pull/4575/files#diff-c058cf28cfeb3924265a8702a1c831cc7b6412b860c404754e9f99791287e797