diff --git a/next.config.js b/next.config.js
index 5a575530716..fe88a09a0c4 100644
--- a/next.config.js
+++ b/next.config.js
@@ -36,6 +36,14 @@ const nextConfig = {
     // Don't bundle the shim unnecessarily.
     config.resolve.alias['use-sync-external-store/shim'] = 'react';
 
+    // ESLint depends on the CommonJS version of esquery,
+    // but Webpack loads the ESM version by default. This
+    // alias ensures the correct version is used.
+    //
+    // More info:
+    // https://github.com/reactjs/react.dev/pull/8115
+    config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js';
+
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
       new NormalModuleReplacementPlugin(
diff --git a/src/components/MDX/Sandpack/runESLint.tsx b/src/components/MDX/Sandpack/runESLint.tsx
index a0b8354612b..667b22d7eb2 100644
--- a/src/components/MDX/Sandpack/runESLint.tsx
+++ b/src/components/MDX/Sandpack/runESLint.tsx
@@ -21,13 +21,6 @@ const getCodeMirrorPosition = (
 
 const linter = new Linter();
 
-// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop.
-// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`.
-// This hack places the functions in the right place.
-const esquery = require('esquery');
-esquery.parse = esquery.default?.parse;
-esquery.matches = esquery.default?.matches;
-
 const reactRules = require('eslint-plugin-react-hooks').rules;
 linter.defineRules({
   'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'],