Getting esmExternalRequirePlugin to work with outputOptions.global in Vite 8

[craigrileyuk]

I've got a Vite plugin that currently uses the outputOptions hook to set a globals resolver function.

However, since upgrading from Vite 7 to Vite 8, it's leaving a require('react') in my builds.

The migration guide (https://vite.dev/guide/migration#require-calls-for-externalized-modules) says to use the esmExternalRequirePlugin plugin to keep the previous behaviour, but it's not working with react.

At the moment, the globals resolve in my plugin is mapping the following for React:

    "react-dom": "window.ReactDOM",
    react: "window.React",

Any ideas as to how to keep the previous behaviour in my case?

[Nickalus12]

This looks like esmExternalRequirePlugin is missing the externalization because the globals resolver function runs too late in the Rollup pipeline. The plugin needs to identify external modules during the transform phase to rewrite require('react') into an ESM import before the final output.

The fix is usually to explicitly list your modules in build.rollupOptions.external alongside the globals config:

build: {
  rollupOptions: {
    external: ['react', 'react-dom'],
    output: {
      globals: {
        react: 'window.React',
        'react-dom': 'window.ReactDOM'
      }
    }
  }
}

I believe the plugin relies on the static `

[craigrileyuk]

Thanks for the help on this one. I'll try it out when I'm next on the project.

[jvarghesetech]

Building on what @Nickalus12 said — the core idea is right, but one important detail: since you're on Vite 8, build.rollupOptions is deprecated and renamed to build.rolldownOptions. The compat layer usually handles it, but in edge cases like this where hook timing matters, using the new option name directly can make a difference:
jsimport { defineConfig, esmExternalRequirePlugin } from 'vite'

export default defineConfig({
plugins: [
esmExternalRequirePlugin({
external: ['react', 'react-dom'],
}),
],
build: {
rolldownOptions: {
external: ['react', 'react-dom', 'react/jsx-runtime'],
output: {
globals: {
react: 'window.React',
'react-dom': 'window.ReactDOM',
},
},
},
},
})
Two extra things worth checking:

Also externalize react/jsx-runtime — Vite 8 ships @vitejs/plugin-react v6 which uses Oxc instead of Babel, and it can inject react/jsx-runtime imports that bypass your globals map.
Confirm your output format — the globals option only kicks in for iife and umd formats. If you're outputting es or cjs, you'll always get bare require()/import in the output regardless of your globals config.

If it's still stubborn after that, you can brute-force it with output.intro to inject the assignments at the top of the bundle:
jsoutput: {
intro: 'var react = window.React; var reactDom = window.ReactDOM;',
}

[craigrileyuk]

Thanks so much for the detailed response. I'll try this out when I next get a chance.

[travisbreaks]

Vite 8 replaced Rollup with Rolldown, and one of the breaking changes is that require() calls for externalized modules are now preserved as raw require() by default. Rollup converted them to import statements, which is how output.globals substitution actually worked; Rolldown doesn't do that automatically.

The fix: add esmExternalRequirePlugin to your plugins array (import it from 'vite'). List the same externals in both the plugin config and rolldownOptions.external. Don't forget react/jsx-runtime if you're using the automatic JSX transform.

import { defineConfig, esmExternalRequirePlugin } from 'vite'

export default defineConfig({
  plugins: [
    esmExternalRequirePlugin({
      external: ['react', 'react-dom', 'react/jsx-runtime'],
    }),
  ],
  build: {
    rolldownOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime'],
      output: { globals: { react: 'React', 'react-dom': 'ReactDOM' } },
    },
  },
})

Also: rollupOptions still works as a deprecated alias, but rolldownOptions is the correct key going forward. And globals only applies to UMD/IIFE output, not ESM/CJS.

[craigrileyuk]

Is this an AI response? You've completely ignored the question.