dotansimha / graphql-code-generator

A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.
https://the-guild.dev/graphql/codegen/
MIT License
10.76k stars 1.31k forks source link

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

Closed nikitalocalhost closed 3 weeks ago

nikitalocalhost commented 8 months ago

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
    }
    }
  3. 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;

6. Add after imports in vite.config.ts 
```typescript
import { babelOptimizerPlugin } from "@graphql-codegen/client-preset";
  1. Set react arguments to enable babelOptimizerPlugin
    {babel: {plugins: [[babelOptimizerPlugin, {artifactDirectory: "./src/lib/gql", gqlTagName: "graphql"}]]}}
  2. Use graphql inside app
    
    import { graphql } from './lib/gql';

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

9. Build
```sh
yarn graphql-codegen
yarn vite build

Expected behavior

Build successful

Screenshots or Videos

No response

Platform

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 commented 8 months ago

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

sebvilhelm commented 7 months ago

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?

pksunkara commented 6 months ago

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

felix98765 commented 2 months ago

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"
        }
    }
n1ru4l commented 3 weeks ago

@pksunkara @felix98765 @sebvilhelm @taobojlen Sorry for the long delay, but this is now finally addressed within https://github.com/dotansimha/graphql-code-generator/pull/9817

Gonna cut a release in a few minutes: https://github.com/dotansimha/graphql-code-generator/pull/10074