fix: client preset babel plugin esm runtime error

[nikitalocalhost]

Description

Closes #9774

When package.json field type set to module, babel errors with enabled @graphql-codegen/client-preset :

[vite:react-babel] /home/projects/github-p5p2s9/src/main.tsx: _babel_template.default is not a function
file: /home/projects/github-p5p2s9/src/main.tsx
error during build:
CallExpression@file:///home/projects/github-p5p2s9/node_modules/@graphql-codegen/client-preset/esm/babel.js:59:59
newFn@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/visitors.js:160:14
_call@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/path/context.js:46:20
call@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/path/context.js:36:17
visit@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/path/context.js:82:31
visitQueue@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:86:16
visitSingle@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:65:19
visit@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:109:19
traverseNode@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/traverse-node.js:22:17
visit@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/path/context.js:88:52
visitQueue@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:86:16
visitMultiple@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:61:17
visit@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:107:19
traverseNode@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/traverse-node.js:22:17
visit@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/path/context.js:88:52
visitQueue@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:86:16
visitMultiple@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:61:17
visit@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:107:19
traverseNode@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/traverse-node.js:22:17
visit@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/path/context.js:88:52
visitQueue@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:86:16
visitSingle@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:65:19
visit@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/context.js:109:19
traverseNode@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/traverse-node.js:22:17
traverse@file:///home/projects/github-p5p2s9/node_modules/@babel/traverse/lib/index.js:52:34
transformFile@file:///home/projects/github-p5p2s9/node_modules/@babel/core/lib/transformation/index.js:82:31
run@file:///home/projects/github-p5p2s9/node_modules/@babel/core/lib/transformation/index.js:24:12
transform@file:///home/projects/github-p5p2s9/node_modules/@babel/core/lib/transform.js:22:18
step@file:///home/projects/github-p5p2s9/node_modules/gensync/index.js:261:32
step/out<@file:///home/projects/github-p5p2s9/node_modules/gensync/index.js:273:13
buildOperation/</<@file:///home/projects/github-p5p2s9/node_modules/gensync/index.js:223:11
async/<@file:///home/projects/github-p5p2s9/node_modules/gensync/index.js:189:35
errback/<@file:///home/projects/github-p5p2s9/node_modules/@babel/core/lib/gensync-utils/async.js:67:9
errback/<@file:///home/projects/github-p5p2s9/node_modules/gensync/index.js:113:35
step@file:///home/projects/github-p5p2s9/node_modules/gensync/index.js:287:14
step/out<@file:///home/projects/github-p5p2s9/node_modules/gensync/index.js:273:13
buildOperation/</<@file:///home/projects/github-p5p2s9/node_modules/gensync/index.js:223:11

error Command failed with exit code 1.

With this it now builds

Trying to fix #9774

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• yarn test
• project that failed with Vite + client-preset + babelOptimizerPlugin = template is not a function #9774 with patch

diff --git a/cjs/babel.js b/cjs/babel.js
index 486ae23e4518874f553b815eb8831d9882fcaa29..53785ba498e8bfc2c47dd085fdab88f26d34b43e 100644
--- a/cjs/babel.js
+++ b/cjs/babel.js
@@ -42,7 +42,7 @@ exports.default = (0, helper_plugin_utils_1.declare)((api, opts) => {
                     ? visitor.getOperationVariableName(firstDefinition)
                     : visitor.getFragmentVariableName(firstDefinition);
                 const importPath = getRelativeImportPath(state, artifactDirectory);
-                const importDeclaration = (0, template_1.default)(`
+                const importDeclaration = (0, template_1.smart)(`
           import { %%importName%% } from %%importPath%%
         `);
                 program.unshiftContainer('body', importDeclaration({
diff --git a/esm/babel.js b/esm/babel.js
index 3d281239438d23d6df9597b1e01a6e97cb9a92ea..85cab61d4b47efd79b55a0228684cdf4d5165bd2 100644
--- a/esm/babel.js
+++ b/esm/babel.js
@@ -39,7 +39,7 @@ export default declare((api, opts) => {
                     ? visitor.getOperationVariableName(firstDefinition)
                     : visitor.getFragmentVariableName(firstDefinition);
                 const importPath = getRelativeImportPath(state, artifactDirectory);
-                const importDeclaration = template(`
+                const importDeclaration = template.smart(`
           import { %%importName%% } from %%importPath%%
         `);
                 program.unshiftContainer('body', importDeclaration({

now builds

Test Environment:

• OS: Linux 5.15.88-gentoo-x86_64
• @graphql-codegen/client-preset@4.1.0:
• NodeJS: v20.6.1

Checklist:

• I have followed the CONTRIBUTING doc and the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[changeset-bot]

🦋 Changeset detected

Latest commit: 68600cf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@graphql-codegen/client-preset	Patch

Not sure what this means? Click here to learn what changesets are.

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

[saihaj]

is there a way to add some sort of test for this? Also can you please create changeset yarn changeset and update the respective packages so we can auto publish

[nikitalocalhost]

is there a way to add some sort of test for this?

Test requires that there is "type": "module" in package.json, which is per-project and idk is there a variant to create subproject with tests.

Creating test with .mjs is not enough, bc (i think) babel

[n1ru4l]

@nikitalocalhost Thank you for this fix and sorry for the long time waiting for a review. 😓