Automatically include Next's Babel config in the dev require hook if …

…the user has no Babel config (#4860)

.changeset/olive-knives-live.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/keystone': minor
+---
+
+Updated the require hook used to compile code in development to use Next's Babel preset when no Babel config is present in the user's config to mirror how Keystone is built for production with Next.

packages-next/keystone/src/lib/requireSource.ts

@@ -11,7 +11,7 @@ import sourceMapSupport from 'source-map-support';
 const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx'];
 const babelPlugins = [require.resolve('@babel/plugin-transform-modules-commonjs')];
 
-export const hook = () => {
+const hook = () => {
   let compiling = false;
   let sourceMaps: Record<string, any> = {};
   let needsToInstallSourceMapSupport = true;
@@ -37,12 +37,26 @@ export const hook = () => {
     }
     try {
       compiling = true;
-      let output = babel.transformSync(code, {
+      const partialConfig = babel.loadPartialConfig({
         plugins: babelPlugins,
         filename,
         sourceMaps: 'both',
         rootMode: 'upward-optional',
       })!;
+      let options = partialConfig.options;
+      if (!partialConfig.hasFilesystemConfig()) {
+        options = {
+          ...options,
+          // note that we're explicitly removing the plugin(@babel/plugin-transform-modules-commonjs)
+          // we added above because for some reason, it interacts poorly with next/babel
+          // and results in stray ESM imports of React when they should be CJS
+          // note that we're never going to be removing a consumer's Babel config since
+          // that would make hasFilesystemConfig() return true
+          plugins: [],
+          presets: [require.resolve('next/babel')],
+        };
+      }
+      const output = babel.transformSync(code, options)!;
       sourceMaps[filename] = output.map;
       return output.code!;
     } finally {