Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
nikitalocalhost opened this issue Dec 1, 2023 · 3 comments · May be fixed by #9817
Open

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

nikitalocalhost opened this issue Dec 1, 2023 · 3 comments · May be fixed by #9817

Comments

@nikitalocalhost
Copy link

nikitalocalhost commented Dec 1, 2023 •
edited

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:

  1. In terminal type yarn vite build

From vite react-ts template:

  1. Add @graphql-codegen/cli and @graphql-codegen/client-preset to template
  2. Add your graphql schema file
query user {
    user(id: 1) {
        id
        username
        email
    }
}
  1. 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;
  1. Add after imports in vite.config.ts
import { babelOptimizerPlugin } from "@graphql-codegen/client-preset";
  1. Set react arguments to enable babelOptimizerPlugin
{babel: {plugins: [[babelOptimizerPlugin, {artifactDirectory: "./src/lib/gql", gqlTagName: "graphql"}]]}}
  1. Use graphql inside app
import { graphql } from './lib/gql';

const USER_QUERY = graphql(`
  query UserQuery($id: ID!) {
    user(id: $id) {
      id
      username
      email
    }
  }
`);
  1. 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
@taobojlen
Copy link

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

@sebvilhelm
Copy link

sebvilhelm commented Jan 12, 2024 •
edited

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?

nikitalocalhost added a commit to nikitalocalhost/graphql-code-generator that referenced this issue Jan 13, 2024
@nikitalocalhost
Fix Babel+ESM
4a5743d 
Trying to fix dotansimha#9774
This was referenced Jan 13, 2024
Closed
Open
@pksunkara
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
4 participants
@pksunkara @sebvilhelm @taobojlen @nikitalocalhost