From a04cc3bfde4f5f6ed8e166ab898bd6b345b3db69 Mon Sep 17 00:00:00 2001 From: Joshua Comeau Date: Fri, 31 Oct 2025 11:11:46 -0400 Subject: [PATCH 1/2] Remove esquery hack --- next.config.js | 3 +++ src/components/MDX/Sandpack/runESLint.tsx | 7 ------- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/next.config.js b/next.config.js index 5a575530716..0bee920b899 100644 --- a/next.config.js +++ b/next.config.js @@ -36,6 +36,9 @@ const nextConfig = { // Don't bundle the shim unnecessarily. config.resolve.alias['use-sync-external-store/shim'] = 'react'; + // TODO comment + 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'], From fd8e157e35cefcf768766ecc2c482a50ddc77c35 Mon Sep 17 00:00:00 2001 From: Joshua Comeau Date: Fri, 31 Oct 2025 11:19:54 -0400 Subject: [PATCH 2/2] Add comment explaining next.config change --- next.config.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/next.config.js b/next.config.js index 0bee920b899..fe88a09a0c4 100644 --- a/next.config.js +++ b/next.config.js @@ -36,7 +36,12 @@ const nextConfig = { // Don't bundle the shim unnecessarily. config.resolve.alias['use-sync-external-store/shim'] = 'react'; - // TODO comment + // 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');