Imported fragments get incorrectly tree-shaken when using `@graphql-tools/webpack-loader` with `esModule: true`

[alexeyr-ci2]

Issue workflow progress

Progress of the issue based on the
Contributor Workflow

• 1. The issue provides a reproduction available on Github, Stackblitz or CodeSandbox

  Make sure to fork this template and run npm run generate in the terminal.

  Please make sure the GraphQL Tools package versions under package.json matches yours.

• 2. A failing test has been provided
• 3. A local solution has been provided
• 4. A pull request is pending review

---

Describe the bug

With esModule: true option, imported fragments are sometimes tree-shaken incorrectly. E.g. in my Webpack bundle I have

45049:function(e,n){}

instead of expected

45049:function(e,n){"use strict";n.A={kind:"Document",definitions:[{kind:"FragmentDefinition",name:"MenuSectionFragment"},...]}}

I get with the fix below. This seems to happen because require(${importFile})

graphql-tools/packages/webpack-loader/src/index.ts

Line 40 in 9eccdf9

const parseDocument = `require(${importFile})`;

doesn't return the document exported by

graphql-tools/packages/webpack-loader/src/index.ts

Line 101 in 9eccdf9

return `export default ${identifier}`;

.

The symptoms are:

TypeError: The following error originated from your test code, not from Cypress.

  > Cannot read properties of undefined (reading 'filter')

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
    at unique (webpack://myApp/./app/javascript/libs/gql/queries/myQuery.gql:9:0)
    at ./app/javascript/libs/gql/queries/myQuery.gql (webpack://myApp/./app/javascript/libs/gql/queries/myQuery.gql:21:0)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:2705:42)
    at ./app/javascript/libs/gql/queries/myQuery.generated.tsx(http://localhost:8080/__cypress/src/spec-0.js:4333:79)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:2705:42)
    at ./app/javascript/myApp/useMenuItem.ts (http://localhost:8080/__cypress/src/spec-0.js:6226:115)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:2705:42)
    at ./app/javascript/myApp/index.ts (http://localhost:8080/__cypress/src/spec-0.js:6189:70)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:2705:42)
    at ./app/javascript/myApp/index.ts (http://localhost:8080/__cypress/src/spec-0.js:5800:70)

2. If this is fixed by patching @graphql-tools/webpack-loader-runtime to replace defs.filter by (defs || []).filter, I see

No fragment named MenuSectionFragment

instead.

To Reproduce Steps to reproduce the behavior:

Use @graphql-tools/webpack-loader with esModule: true and import a fragment from a different file. It may not always happen; I'll try to add a codesandbox and update the issue.

Expected behavior

Using esModule: true should not break the app.

Expected fix

Update

graphql-tools/packages/webpack-loader/src/index.ts

Line 40 in 9eccdf9

const parseDocument = `require(${importFile})`;

to

const parseDocument = options.esModule ? `require(${importFile}).default` : `require(${importFile})`;

(or use an import statement instead but that would be more complicated).

Also update

graphql-tools/packages/webpack-loader-runtime/src/index.ts

Line 6 in 9eccdf9

return defs.filter(function (def) {

and

graphql-tools/packages/webpack-loader-runtime/src/index.ts

Line 22 in 9eccdf9

return defs.filter(def => {

to use (defs || []).filter to correctly handle the case where an imported file is not actually used.

Environment:

• OS: Ubuntu
• @graphql-tools/webpack-loader: 7.0.0
• @graphql-tools/webpack-loader-runtime: 7.0.0
• NodeJS: 20.16.0

Additional context

[ardatan]

Thanks for creating the issue! PRs are welcome!