[WIP] Fix incorrect tree-shaking of imported fragments with esModule: true

[Copilot]

Thanks for assigning this issue to me. I'm starting to work on it and will keep this PR's description up to date as I form a plan and make progress.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Imported fragments get incorrectly tree-shaken when using @graphql-tools/webpack-loader with esModule: true</issue_title>
<issue_description>### 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

</issue_description>

Comments on the Issue (you are @copilot in this section)

@ardatan Thanks for creating the issue! PRs are welcome!

• Fixes Imported fragments get incorrectly tree-shaken when using @graphql-tools/webpack-loader with esModule: true #7935

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 21df149

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR