Vite + client-preset + babelOptimizerPlugin = template is not a function #9774

nikitalocalhost · 2023-12-01T22:30:51Z

Which packages are impacted by your issue?

@graphql-codegen/client-preset

Describe the bug

When building app with vite using babelOptimizerPlugin from client-preset, building throws an error:

$ yarn vite build
yarn run v1.22.19
$ /home/projects/github-p5p2s9/node_modules/.bin/vite build
vite v5.0.4 building for production...
✓ 2 modules transformed.
[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.

This happens when package.json type set to module.

When manually changing node_modules/@graphql-codegen/client-preset/esm/babel.js:42 template to template.smart build is successful

Your Example Website or App

https://stackblitz.com/edit/github-p5p2s9?file=vite.config.ts

Steps to Reproduce the Bug or Issue

From example:

In terminal type yarn vite build

From vite react-ts template:

Add @graphql-codegen/cli and @graphql-codegen/client-preset to template
Add your graphql schema file

query user {
    user(id: 1) {
        id
        username
        email
    }
}

Add your graphql-code-generator config

import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'schema.graphql',
  documents: ['src/**/*{js,jsx,ts,tsx}'],
  ignoreNoDocuments: true,
  generates: {
    './src/lib/gql/': {
      preset: 'client-preset',
    },
  },
};

export default config;

Add after imports in vite.config.ts

import { babelOptimizerPlugin } from "@graphql-codegen/client-preset";

Set react arguments to enable babelOptimizerPlugin

{babel: {plugins: [[babelOptimizerPlugin, {artifactDirectory: "./src/lib/gql", gqlTagName: "graphql"}]]}}

Use graphql inside app

import { graphql } from './lib/gql';

const USER_QUERY = graphql(`
  query UserQuery($id: ID!) {
    user(id: $id) {
      id
      username
      email
    }
  }
`);

Build

yarn graphql-codegen
yarn vite build

Expected behavior

Build successful

Screenshots or Videos

No response

Platform

OS: Linux
NodeJS: 20.5.1
graphql version: 16.8.1
@graphql-codegen/cli version: 5.0.0
@graphql-codegen/client-preset version: 4.1.0

Codegen Config File

import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'schema.graphql',
  documents: ['src/**/*{js,jsx,ts,tsx}'],
  ignoreNoDocuments: true,
  generates: {
    './src/lib/gql/': {
      preset: 'client-preset',
    },
  },
};

export default config;

Additional context

No response

The text was updated successfully, but these errors were encountered:

taobojlen · 2023-12-17T08:31:20Z

I have the same issue. For now I'm using patch-package to apply the fix you suggested (replacing template with template.smart).

sebvilhelm · 2024-01-12T09:41:36Z

Same issue, seems to me like an issue with Babel+ESM. I tried updating @babel/helper-plugin-utils and @babel/template in client-preset, but that didn't seem to fix it.

@taobojlen have you submitted a PR with your change?

Trying to fix dotansimha#9774

pksunkara · 2024-01-28T06:19:26Z

@n1ru4l The fix is available, can we please get this fixed?

felix98765 · 2024-05-27T04:49:24Z

The pnpm patch fixes it.

patches/@graphql-codegen__client-preset@4.2.6.patch

diff --git a/esm/babel.js b/esm/babel.js
index 3d281239438d23d6df9597b1e01a6e97cb9a92ea..3ed3e23f5a299ad8d6b699006b2cbdb21a3aa36f 100644
--- a/esm/babel.js
+++ b/esm/babel.js
@@ -1,8 +1,9 @@
 import * as path from 'path';
 import { declare } from '@babel/helper-plugin-utils';
-import template from '@babel/template';
+import _template from '@babel/template';
 import { ClientSideBaseVisitor } from '@graphql-codegen/visitor-plugin-common';
 import { buildSchema, parse } from 'graphql';
+const template = _template.default;
 const noopSchema = buildSchema(`type Query { _: Int }`);
 export default declare((api, opts) => {
     const visitor = new ClientSideBaseVisitor(noopSchema, [], {}, {});

package.json

...
    "pnpm": {
        "patchedDependencies": {
            "@graphql-codegen/client-preset@4.2.6": "patches/@graphql-codegen__client-preset@4.2.6.patch"
        }
    }

* Fix Babel+ESM Trying to fix #9774 * Add changeset * Update .changeset/twelve-oranges-breathe.md * Update .changeset/twelve-oranges-breathe.md --------- Co-authored-by: Laurin Quast <laurinquast@googlemail.com>

n1ru4l · 2024-07-28T13:38:08Z

@pksunkara @felix98765 @sebvilhelm @taobojlen Sorry for the long delay, but this is now finally addressed within #9817

Gonna cut a release in a few minutes: #10074

nikitalocalhost added a commit to nikitalocalhost/graphql-code-generator that referenced this issue Jan 13, 2024

Fix Babel+ESM

4a5743d

Trying to fix dotansimha#9774

This was referenced Jan 13, 2024

Fix Babel+ESM (#9774) nikitalocalhost/graphql-code-generator#1

Closed

fix: client preset babel plugin esm runtime error #9817

Merged

n1ru4l closed this as completed in #9817 Jul 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite + client-preset + babelOptimizerPlugin = template is not a function #9774

Vite + client-preset + babelOptimizerPlugin = template is not a function #9774

nikitalocalhost commented Dec 1, 2023 •

edited

Loading

taobojlen commented Dec 17, 2023

sebvilhelm commented Jan 12, 2024 •

edited

Loading

pksunkara commented Jan 28, 2024

felix98765 commented May 27, 2024 •

edited

Loading

n1ru4l commented Jul 28, 2024

Vite + client-preset + babelOptimizerPlugin = template is not a function #9774

Vite + client-preset + babelOptimizerPlugin = template is not a function #9774

Comments

nikitalocalhost commented Dec 1, 2023 • edited Loading

Which packages are impacted by your issue?

Describe the bug

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

Screenshots or Videos

Platform

Codegen Config File

Additional context

taobojlen commented Dec 17, 2023

sebvilhelm commented Jan 12, 2024 • edited Loading

pksunkara commented Jan 28, 2024

felix98765 commented May 27, 2024 • edited Loading

n1ru4l commented Jul 28, 2024

nikitalocalhost commented Dec 1, 2023 •

edited

Loading

sebvilhelm commented Jan 12, 2024 •

edited

Loading

felix98765 commented May 27, 2024 •

edited

Loading