`gql-tag-operations-preset` `babelPlugin` doesn't work with `vite`

[PatrykWalach]

Describe the bug

Using babelPlugin from gql-tag-operations-preset inside vite project throws _babel_template.default is not a function

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-toyias

Steps to Reproduce the Bug or Issue

Use the link above or:

1. Create new vite project with react
2. npm install graphql @graphql-codegen/gql-tag-operations-preset
3. Add babel plugin

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { babelPlugin } from '@graphql-codegen/gql-tag-operations-preset';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({ babel: { plugins: [[babelPlugin, {}]] } })],
});

4. Define a gql operation

// src/App.jsx
const Query = gql(`query AppQuery { hello }`);

Expected behavior

Works out of the box

Screenshots or Videos

Platform

• graphql version: 16.5.0
• @graphql-codegen/gql-tag-operations-preset version: 1.5.4
• vite version: 3.0.4

Codegen Config File

No response

Additional context

Possible fix is to use template.smart instead of default export in gql-tag-operations/src/babel.ts#L56:

- const importDeclaration = template(`
+ const importDeclaration = template.smart(`
import { %%importName%% } from %%importPath%%
`);

Default export from @babel/template is smart.bind(undefined) so using tempalte.smart shouldn't be a breaking change.