From da289189544bc949ec9cd9023e9db021db9c071d Mon Sep 17 00:00:00 2001 From: Sergii Grebeniuk Date: Mon, 30 Sep 2024 13:27:27 +0200 Subject: [PATCH 1/2] fix: Revert "fix: keep `graphql` import as require in cjs (#2258)" This reverts commit b97760270b28bd633b56332d87a9d834f653cad2. --- config/plugins/esbuild/graphQLImportPlugin.ts | 34 ------------------- .../utils/internal/parseGraphQLRequest.ts | 14 ++++---- tsup.config.ts | 3 +- 3 files changed, 7 insertions(+), 44 deletions(-) delete mode 100644 config/plugins/esbuild/graphQLImportPlugin.ts diff --git a/config/plugins/esbuild/graphQLImportPlugin.ts b/config/plugins/esbuild/graphQLImportPlugin.ts deleted file mode 100644 index c09a5907b..000000000 --- a/config/plugins/esbuild/graphQLImportPlugin.ts +++ /dev/null @@ -1,34 +0,0 @@ -import fs from 'fs/promises' -import type { Plugin } from 'esbuild' - -/** - * A plugin to replace `require('graphql')` statements with `await import('graphql')` - * only for ESM bundles. This makes the GraphQL module to be imported lazily - * while maintaining the CommonJS compatibility. - * @see https://github.com/mswjs/msw/issues/2254 - */ -export function graphqlImportPlugin(): Plugin { - return { - name: 'graphql-import-plugin', - setup(build) { - if (build.initialOptions.format !== 'esm') { - return - } - - build.onLoad({ filter: /\.ts$/ }, async (args) => { - const contents = await fs.readFile(args.path, 'utf-8') - const match = /require\(['"]graphql['"]\)/g.exec(contents) - - if (match) { - return { - loader: 'ts', - contents: - contents.slice(0, match.index - 1) + - `await import('graphql').catch((error) => {console.error('[MSW] Failed to parse a GraphQL query: cannot import the "graphql" module. Please make sure you install it if you wish to intercept GraphQL requests. See the original import error below.'); throw error})` + - contents.slice(match.index + match[0].length), - } - } - }) - }, - } -} diff --git a/src/core/utils/internal/parseGraphQLRequest.ts b/src/core/utils/internal/parseGraphQLRequest.ts index 922375fae..81f6b1097 100644 --- a/src/core/utils/internal/parseGraphQLRequest.ts +++ b/src/core/utils/internal/parseGraphQLRequest.ts @@ -40,14 +40,12 @@ export function parseDocumentNode(node: DocumentNode): ParsedGraphQLQuery { } async function parseQuery(query: string): Promise { - /** - * @note Use `require` to get the "graphql" module here. - * It has to be scoped to this function because this module leaks to the - * root export. It has to be `require` because tools like Jest have trouble - * handling dynamic imports. It gets replaced with a dynamic import on build time. - */ - // eslint-disable-next-line @typescript-eslint/no-require-imports - const { parse } = require('graphql') + const { parse } = await import('graphql').catch((error) => { + devUtils.error( + 'Failed to parse a GraphQL query: cannot import the "graphql" module. Please make sure you install it if you wish to intercept GraphQL requests. See the original import error below.', + ) + throw error + }) try { const ast = parse(query) diff --git a/tsup.config.ts b/tsup.config.ts index 8c606d11e..68c889463 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -7,7 +7,6 @@ import { } from './config/plugins/esbuild/copyWorkerPlugin' import { resolveCoreImportsPlugin } from './config/plugins/esbuild/resolveCoreImportsPlugin' import { forceEsmExtensionsPlugin } from './config/plugins/esbuild/forceEsmExtensionsPlugin' -import { graphqlImportPlugin } from './config/plugins/esbuild/graphQLImportPlugin' import packageJson from './package.json' // Externalize the in-house dependencies so that the user @@ -34,7 +33,7 @@ const coreConfig: Options = { sourcemap: true, dts: true, tsconfig: path.resolve(__dirname, 'src/tsconfig.core.build.json'), - esbuildPlugins: [graphqlImportPlugin(), forceEsmExtensionsPlugin()], + esbuildPlugins: [forceEsmExtensionsPlugin()], } const nodeConfig: Options = { From 7a2c6ff41d88302ffd4adb8eb17dede5231ea74e Mon Sep 17 00:00:00 2001 From: Sergii Grebeniuk Date: Mon, 30 Sep 2024 13:28:26 +0200 Subject: [PATCH 2/2] fix: Revert "fix: import `graphql` lazily (#2250)" This reverts commit 1799e0638f0f860c19ba46db7c4287012f2cb716. --- src/core/utils/internal/parseGraphQLRequest.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/core/utils/internal/parseGraphQLRequest.ts b/src/core/utils/internal/parseGraphQLRequest.ts index 81f6b1097..62fa55379 100644 --- a/src/core/utils/internal/parseGraphQLRequest.ts +++ b/src/core/utils/internal/parseGraphQLRequest.ts @@ -3,6 +3,7 @@ import type { OperationDefinitionNode, OperationTypeNode, } from 'graphql' +import { parse } from 'graphql' import type { GraphQLVariables } from '../../handlers/GraphQLHandler' import { toPublicUrl } from '../request/toPublicUrl' import { devUtils } from './devUtils' @@ -39,14 +40,7 @@ export function parseDocumentNode(node: DocumentNode): ParsedGraphQLQuery { } } -async function parseQuery(query: string): Promise { - const { parse } = await import('graphql').catch((error) => { - devUtils.error( - 'Failed to parse a GraphQL query: cannot import the "graphql" module. Please make sure you install it if you wish to intercept GraphQL requests. See the original import error below.', - ) - throw error - }) - +function parseQuery(query: string): ParsedGraphQLQuery | Error { try { const ast = parse(query) return parseDocumentNode(ast) @@ -187,7 +181,7 @@ export async function parseGraphQLRequest( } const { query, variables } = input - const parsedResult = await parseQuery(query) + const parsedResult = parseQuery(query) if (parsedResult instanceof Error) { const requestPublicUrl = toPublicUrl(request.url)