Get rid of 'proposal-dynamic-import' (#8456)

* Get rid of 'proposal-dynamic-import' * Work around The Guild's whatwg-node/server bug * Import with .js * Switch back to moduleResolution: node * Don't touch potentially broken db imports * try just using require for exec * do the same for runPrerender * use require for importing App * use require for data migrate * fix remaining problematic await import statements * fix check * Regular yargs import --------- Co-authored-by: Dominic Saadi <[email protected]>
redwoodjs · Jun 8, 2023 · 1da861d · 1da861d
1 parent b0266f8
commit 1da861d
Show file tree

Hide file tree

Showing 41 changed files with 74 additions and 44 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -34,7 +34,10 @@ module.exports = {
           // List of supported proposals: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#ecmascript-proposals
           proposals: true,
         },
-        exclude: ['es.error.cause'],
+        exclude: [
+          'es.error.cause',
+          process.env.NODE_ENV !== 'test' && 'proposal-dynamic-import',
+        ].filter(Boolean),
       },
     ],
     '@babel/preset-react',

diff --git a/packages/auth-providers/auth0/setup/src/setup.ts b/packages/auth-providers/auth0/setup/src/setup.ts
@@ -1,4 +1,4 @@
-import yargs from 'yargs'
+import * as yargs from 'yargs'
 
 import { standardAuthBuilder } from '@redwoodjs/cli-helpers'
 

diff --git a/packages/auth-providers/azureActiveDirectory/setup/src/setup.ts b/packages/auth-providers/azureActiveDirectory/setup/src/setup.ts
@@ -14,6 +14,6 @@ export interface Args {
 }
 
 export async function handler(options: Args) {
-  const { handler } = await import('./setupHandler')
+  const { handler } = await import('./setupHandler.js')
   return handler(options)
 }
diff --git a/packages/auth-providers/clerk/setup/src/setup.ts b/packages/auth-providers/clerk/setup/src/setup.ts
@@ -14,6 +14,6 @@ export interface Args {
 }
 
 export async function handler(options: Args) {
-  const { handler } = await import('./setupHandler')
+  const { handler } = await import('./setupHandler.js')
   return handler(options)
 }
diff --git a/packages/auth-providers/custom/setup/src/setup.ts b/packages/auth-providers/custom/setup/src/setup.ts
@@ -14,6 +14,6 @@ export interface Args {
 }
 
 export async function handler(options: Args) {
-  const { handler } = await import('./setupHandler')
+  const { handler } = await import('./setupHandler.js')
   return handler(options)
 }
diff --git a/packages/auth-providers/dbAuth/setup/src/setup.ts b/packages/auth-providers/dbAuth/setup/src/setup.ts
@@ -32,6 +32,6 @@ export interface Args {
 }
 
 export const handler = async (options: Args) => {
-  const { handler } = await import('./setupHandler')
+  const { handler } = await import('./setupHandler.js')
   return handler(options)
 }
diff --git a/packages/auth-providers/firebase/setup/src/setup.ts b/packages/auth-providers/firebase/setup/src/setup.ts
@@ -14,6 +14,6 @@ export interface Args {
 }
 
 export async function handler(options: Args) {
-  const { handler } = await import('./setupHandler')
+  const { handler } = await import('./setupHandler.js')
   return handler(options)
 }
diff --git a/packages/auth-providers/netlify/setup/src/setup.ts b/packages/auth-providers/netlify/setup/src/setup.ts
@@ -14,6 +14,6 @@ export interface Args {
 }
 
 export async function handler(options: Args) {
-  const { handler } = await import('./setupHandler')
+  const { handler } = await import('./setupHandler.js')
   return handler(options)
 }
diff --git a/packages/auth-providers/supabase/setup/src/setup.ts b/packages/auth-providers/supabase/setup/src/setup.ts
@@ -14,6 +14,6 @@ export interface Args {
 }
 
 export async function handler(options: Args) {
-  const { handler } = await import('./setupHandler')
+  const { handler } = await import('./setupHandler.js')
   return handler(options)
 }
diff --git a/packages/auth-providers/supertokens/setup/src/setup.ts b/packages/auth-providers/supertokens/setup/src/setup.ts
@@ -14,6 +14,6 @@ export interface Args {
 }
 
 export async function handler(options: Args) {
-  const { handler } = await import('./setupHandler')
+  const { handler } = await import('./setupHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/build.js b/packages/cli/src/commands/build.js
@@ -57,6 +57,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./buildHandler')
+  const { handler } = await import('./buildHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/check.js b/packages/cli/src/commands/check.js
@@ -6,10 +6,27 @@ export const aliases = ['diagnostics']
 export const description =
   'Get structural diagnostics for a Redwood project (experimental)'
 
-export const handler = async () => {
-  const { printDiagnostics, DiagnosticSeverity } = await import(
-    '@redwoodjs/structure'
-  )
+export const handler = () => {
+  // Deep dive
+  //
+  // It seems like we have to use `require` here instead of `await import`
+  // because of how Babel builds the `DiagnosticSeverity` export in `@redwoodjs/structure`:
+  //
+  // ```js
+  // _Object$defineProperty(exports, "DiagnosticSeverity", {
+  //   enumerable: true,
+  //   get: function () {
+  //     return _vscodeLanguageserverTypes.DiagnosticSeverity;
+  //   }
+  // });
+  // ```
+  //
+  // I'm not sure why, but with `await import`, `DiagnosticSeverity` is `undefined`
+  // so it seems like `await import` doesn't execute the getter function.
+  const {
+    printDiagnostics,
+    DiagnosticSeverity,
+  } = require('@redwoodjs/structure')
 
   printDiagnostics(getPaths().base, {
     getSeverityLabel: (severity) => {

diff --git a/packages/cli/src/commands/console.js b/packages/cli/src/commands/console.js
@@ -3,6 +3,6 @@ export const aliases = ['c']
 export const description = 'Launch an interactive Redwood shell (experimental)'
 
 export const handler = async (options) => {
-  const { handler } = await import('./consoleHandler')
+  const { handler } = await import('./consoleHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/dataMigrate/install.js b/packages/cli/src/commands/dataMigrate/install.js
@@ -13,6 +13,6 @@ export function builder(yargs) {
 }
 
 export async function handler(options) {
-  const { handler } = await import('./installHandler')
+  const { handler } = await import('./installHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/dataMigrate/up.js b/packages/cli/src/commands/dataMigrate/up.js
@@ -32,6 +32,6 @@ export function builder(yargs) {
 }
 
 export async function handler(options) {
-  const { handler } = await import('./upHandler')
+  const { handler } = await import('./upHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/dataMigrate/upHandler.js b/packages/cli/src/commands/dataMigrate/upHandler.js
@@ -48,7 +48,7 @@ export async function handler({ importDbClientFromDist, distPath }) {
     registerApiSideBabelHook()
     requireHookRegistered = true
 
-    db = (await import(path.join(redwoodProjectPaths.api.lib, 'db'))).db
+    db = require(path.join(redwoodProjectPaths.api.lib, 'db')).db
   }
 
   const pendingDataMigrations = await getPendingDataMigrations(db)
@@ -187,7 +187,7 @@ function sortDataMigrationsByVersion(dataMigrationA, dataMigrationB) {
 }
 
 async function runDataMigration(db, dataMigrationPath) {
-  const dataMigration = await import(dataMigrationPath)
+  const dataMigration = require(dataMigrationPath)
 
   const startedAt = new Date()
   await dataMigration.default({ db })

diff --git a/packages/cli/src/commands/deploy/serverless.js b/packages/cli/src/commands/deploy/serverless.js
@@ -82,7 +82,7 @@ export const buildCommands = ({ sides }) => {
       task: async () => {
         // Dynamically import this function
         // because its dependencies are only installed when `rw setup deploy serverless` is run
-        const { nftPack } = (await import('./packing/nft')).default
+        const { nftPack } = (await import('./packing/nft.js')).default
 
         await nftPack()
       },

diff --git a/packages/cli/src/commands/dev.js b/packages/cli/src/commands/dev.js
@@ -42,6 +42,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./devHandler')
+  const { handler } = await import('./devHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/exec.js b/packages/cli/src/commands/exec.js
@@ -29,6 +29,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./execHandler')
+  const { handler } = await import('./execHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/experimental/setupInngest.js b/packages/cli/src/commands/experimental/setupInngest.js
@@ -19,6 +19,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./setupInngestHandler')
+  const { handler } = await import('./setupInngestHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/experimental/setupOpentelemetry.js b/packages/cli/src/commands/experimental/setupOpentelemetry.js
@@ -24,6 +24,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./setupOpentelemetryHandler')
+  const { handler } = await import('./setupOpentelemetryHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/experimental/setupSentry.js b/packages/cli/src/commands/experimental/setupSentry.js
@@ -18,6 +18,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./setupSentryHandler')
+  const { handler } = await import('./setupSentryHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/experimental/setupServerFile.js b/packages/cli/src/commands/experimental/setupServerFile.js
@@ -24,6 +24,6 @@ export function builder(yargs) {
 }
 
 export async function handler(options) {
-  const { handler } = await import('./setupServerFileHandler')
+  const { handler } = await import('./setupServerFileHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/experimental/studio.js b/packages/cli/src/commands/experimental/studio.js
@@ -15,6 +15,6 @@ export function builder(yargs) {
 }
 
 export async function handler(options) {
-  const { handler } = await import('./studioHandler')
+  const { handler } = await import('./studioHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/cache/cache.js b/packages/cli/src/commands/setup/cache/cache.js
@@ -27,6 +27,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./cacheHandler')
+  const { handler } = await import('./cacheHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/custom-web-index/custom-web-index.js b/packages/cli/src/commands/setup/custom-web-index/custom-web-index.js
@@ -13,6 +13,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./custom-web-index-handler')
+  const { handler } = await import('./custom-web-index-handler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/deploy/providers/coherence.js b/packages/cli/src/commands/setup/deploy/providers/coherence.js
@@ -11,6 +11,6 @@ export function builder(yargs) {
 }
 
 export async function handler(options) {
-  const { handler } = await import('./coherenceHandler')
+  const { handler } = await import('./coherenceHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/generator/generator.js b/packages/cli/src/commands/setup/generator/generator.js
@@ -49,6 +49,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./generatorHandler')
+  const { handler } = await import('./generatorHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/graphiql/graphiql.js b/packages/cli/src/commands/setup/graphiql/graphiql.js
@@ -43,6 +43,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./graphiqlHandler')
+  const { handler } = await import('./graphiqlHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/graphiql/graphiqlHandler.js b/packages/cli/src/commands/setup/graphiql/graphiqlHandler.js
@@ -57,7 +57,7 @@ const printHeaders = async () => {
     )
   }
 
-  const script = await import(srcPath)
+  const script = require(srcPath)
   await script.default()
 }
 

diff --git a/packages/cli/src/commands/setup/i18n/i18n.js b/packages/cli/src/commands/setup/i18n/i18n.js
@@ -10,6 +10,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./i18nHandler')
+  const { handler } = await import('./i18nHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/tsconfig/tsconfig.js b/packages/cli/src/commands/setup/tsconfig/tsconfig.js
@@ -12,6 +12,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./tsconfigHandler')
+  const { handler } = await import('./tsconfigHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/vite/vite.js b/packages/cli/src/commands/setup/vite/vite.js
@@ -25,6 +25,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./viteHandler')
+  const { handler } = await import('./viteHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/setup/webpack/webpack.js b/packages/cli/src/commands/setup/webpack/webpack.js
@@ -11,6 +11,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./webpackHandler')
+  const { handler } = await import('./webpackHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/commands/test.js b/packages/cli/src/commands/test.js
@@ -43,6 +43,6 @@ export const builder = (yargs) => {
 }
 
 export const handler = async (options) => {
-  const { handler } = await import('./testHandler')
+  const { handler } = await import('./testHandler.js')
   return handler(options)
 }
diff --git a/packages/cli/src/lib/exec.js b/packages/cli/src/lib/exec.js
@@ -9,11 +9,11 @@ export async function runScriptFunction({
   functionName,
   args,
 }) {
-  const script = await import(scriptPath)
+  const script = require(scriptPath)
   const returnValue = await script[functionName](args)
 
   try {
-    const { db } = await import(path.join(getPaths().api.lib, 'db'))
+    const { db } = require(path.join(getPaths().api.lib, 'db'))
     db.$disconnect()
   } catch (e) {
     // silence

diff --git a/packages/graphql-server/ambient.d.ts b/packages/graphql-server/ambient.d.ts
@@ -0,0 +1,9 @@
+declare module '@whatwg-node/server' {
+  export interface ServerAdapterPlugin<TServerContext = {}> {
+    onRequest?: OnRequestHook<TServerContext>
+    onResponse?: OnResponseHook<TServerContext>
+  }
+  export const Response: typeof globalThis.Response & {
+    json(data: any, init?: ResponseInit): globalThis.Response
+  }
+}
diff --git a/packages/graphql-server/src/functions/graphql.ts b/packages/graphql-server/src/functions/graphql.ts
@@ -251,6 +251,7 @@ export const createGraphQLHandler = ({
       // If you specify values for both headers and multiValueHeaders, API Gateway merges them into a single list.
       const responseHeaders: Record<string, string> = {}
 
+      // @ts-expect-error - https://github.com/ardatan/whatwg-node/issues/574
       response.headers.forEach((value, name) => {
         responseHeaders[name] = value
       })

diff --git a/packages/graphql-server/tsconfig.json b/packages/graphql-server/tsconfig.json
@@ -6,7 +6,7 @@
     "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
     "outDir": "dist",
   },
-  "include": ["src/**/*"],
+  "include": ["ambient.d.ts", "src/**/*"],
   "references": [
     { "path": "../api" },
   ]

diff --git a/packages/prerender/src/graphql/graphql.ts b/packages/prerender/src/graphql/graphql.ts
@@ -39,7 +39,7 @@ export async function getGqlHandler() {
   const gqlPath = path.join(getPaths().api.functions, 'graphql')
 
   try {
-    const { handler } = await import(gqlPath)
+    const { handler } = require(gqlPath)
 
     return async (operation: Record<string, unknown>) => {
       return await handler(buildApiEvent(operation), buildContext())

diff --git a/packages/prerender/src/runPrerender.tsx b/packages/prerender/src/runPrerender.tsx
@@ -333,7 +333,7 @@ export const runPrerender = async ({
   })
 
   const indexContent = fs.readFileSync(getRootHtmlPath()).toString()
-  const { default: App } = await import(getPaths().web.app)
+  const { default: App } = require(getPaths().web.app)
 
   const componentAsHtml = await recursivelyRender(
     App,
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,7 +57,7 @@ const printHeaders = async () => { @@
         )
       }
-      const script = await import(srcPath)
+      const script = require(srcPath)
       await script.default()
     }
@@ Expand Down @@