Remove 'esquery' hack to potentially enable Turbopack

[joshwcomeau]

The interactive playgrounds use ESLint to show lint errors, when the Rules of Hooks are broken. Inside ESLint, it loads a dependency called esquery, but it loads the ESM version rather than the CJS version, and throws an exception as a result (it can't find the parse method).

The current solution is to load esquery with require() and patch the object, essentially converting it to a more typical CJS export format. Unfortunately, this doesn't work with Turbopack, since modules are frozen with Object.freeze (or something similar). Turbopack is now the primary bundler for Next.js, which means this one issue is currently blocking React.dev from updating to Turbopack (and potentially seeing some pretty good DX improvements!).

I ran into this issue myself, and after digging into it for a while, I think the best solution is to set up a resolve alias. The esquery dependency comes with both CJS and ESM versions, so we can explicitly instruct esquery to resolve to the CJS version.

This PR adds the necessary Webpack config. If you plan on migrating to Turbopack, the fix is similar:

const nextConfig = {
  turbopack: {
    resolveAlias: {
      esquery: 'esquery/dist/esquery.min.js',
    },
  },
};

Hope it helps!

[github-actions]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌