Fix importing Node ESM (#6895)

.changeset/brown-files-sit.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/keystone': patch
+---
+
+Fixed importing packages that provide Node ESM

examples-staging/basic/package.json

@@ -24,7 +24,8 @@
     "graphql-tag": "^2.12.5",
     "next": "^12.0.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "typescript": "^4.4.4"

examples-staging/basic/schema.graphql

@@ -3,6 +3,7 @@
 
 type Query {
   randomNumber: RandomNumber
+  uuid: ID!
   users(
     where: UserWhereInput! = {}
     orderBy: [UserOrderByInput!]! = []

examples-staging/basic/schema.ts

@@ -13,6 +13,7 @@ import {
 import { document } from '@keystone-next/fields-document';
 // import { cloudinaryImage } from '@keystone-next/cloudinary';
 import { KeystoneListsAPI } from '@keystone-next/keystone/types';
+import { v4 } from 'uuid';
 import { componentBlocks } from './admin/fieldViews/Content';
 import { KeystoneListsTypeInfo } from '.keystone/types';
 
@@ -196,6 +197,7 @@ export const extendGraphqlSchema = graphQLSchemaExtension({
   typeDefs: gql`
     type Query {
       randomNumber: RandomNumber
+      uuid: ID!
     }
     type RandomNumber {
       number: Int
@@ -227,6 +229,7 @@ export const extendGraphqlSchema = graphQLSchemaExtension({
         number: randomNumber(),
         generatedAt: Date.now(),
       }),
+      uuid: () => v4(),
     },
   },
 });

packages/keystone/src/scripts/run/dev.ts

@@ -89,7 +89,7 @@ export const dev = async (cwd: string, shouldDropDatabase: boolean) => {
     // dynamic importing didn't work on windows because it couldn't get the path to require the chunk for some reason
     await fs.outputFile(
       `${getAdminPath(cwd)}/pages/api/__keystone_api_build.js`,
-      `exports.getConfig = () => require(${p}).default;
+      `exports.getConfig = () => require(${p});
 const x = Math.random();
 exports.default = function (req, res) { return res.send(x.toString()) }
 `
@@ -124,7 +124,13 @@ exports.default = function (req, res) { return res.send(x.toString()) }
             `${getAdminPath(cwd)}/.next/server/pages/api/__keystone_api_build`
           );
           delete require.cache[resolved];
-          const newConfig = initConfig(require(resolved).getConfig());
+          // webpack will make modules that import Node ESM externals(which must be loaded with dynamic import)
+          // export a promise that resolves to the actual export so yeah, we need to await a require call
+          // technically, the await for requiring the api route module isn't necessary since there are no imports there
+          // but just in case webpack decides to make it async in the future, this'll still work
+          const apiRouteModule = await require(resolved);
+          const uninitializedConfig = (await apiRouteModule.getConfig()).default;
+          const newConfig = initConfig(uninitializedConfig);
           const newPrismaSchema = printPrismaSchema(
             initialiseLists(newConfig.lists, newConfig.db.provider),
             newConfig.db.provider,

packages/keystone/src/scripts/run/start.ts

@@ -17,7 +17,9 @@ export const start = async (cwd: string) => {
     console.log('🚨 keystone-next build must be run before running keystone-next start');
     throw new ExitError(1);
   }
-  const config = initConfig(require(apiFile).config);
+  // webpack will make modules that import Node ESM externals(which must be loaded with dynamic import)
+  // export a promise that resolves to the actual export so yeah, we need to await a require call
+  const config = initConfig((await require(apiFile)).config);
   const { getKeystone, graphQLSchema } = createSystem(config);
 
   const prismaClient = requirePrismaClient(cwd);