fix(webpack-plugin): 'require is not defined' error in Node 24

.changeset/fresh-cars-fetch.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+'@vanilla-extract/next-plugin': patch
+---
+
+Fix `require is not defined` error in ESM bundles by calling `createRequire`

packages/next-plugin/src/index.ts

@@ -11,6 +11,9 @@ import type {
   NextConfig,
   WebpackConfigContext,
 } from 'next/dist/server/config-shared';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 type PluginOptions = ConstructorParameters<typeof VanillaExtractPlugin>[0];
 

packages/webpack-plugin/src/loader.ts

@@ -12,6 +12,9 @@ import {
 import type { LoaderContext } from './types';
 import { debug, formatResourcePath } from './logger';
 import { ChildCompiler } from './compiler';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 const virtualFileLoader = require.resolve(
   path.join(

packages/webpack-plugin/src/next.ts

@@ -1,6 +1,9 @@
 import path from 'path';
 import { AbstractVanillaExtractPlugin } from './plugin';
 import type { Compiler } from 'webpack';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 const virtualNextFileLoader = require.resolve(
   path.join(

packages/webpack-plugin/src/plugin.ts

@@ -7,6 +7,10 @@ import type { Compiler, RuleSetRule } from 'webpack';
 import { ChildCompiler } from './compiler';
 import createCompat, { type WebpackCompat } from './compat';
 
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
 const pluginName = 'VanillaExtractPlugin';
 
 function markCSSFilesAsSideEffects(compiler: Compiler, compat: WebpackCompat) {