Registry /
devops / babel-plugin-graphql-tag
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
plugin (default)
✓ module.exports = { plugins: ['babel-plugin-graphql-tag'] }
✗ import babelPluginGraphqlTag from 'babel-plugin-graphql-tag'
Used as a Babel plugin, not imported directly. ESM import is not supported; use CJS in config.
gql (graphql-tag)
✓ import gql from 'graphql-tag'
✗ const gql = require('graphql-tag')
Both import and require are supported. The plugin will remove the import/require and replace the template with compiled AST.
gql (@apollo/client)
✓ import { gql } from '@apollo/client'
✗ import gql from '@apollo/client'
For Apollo Client v3+, the gql function is a named export. The plugin supports this import source by default.
Configures Babel to compile GraphQL tagged template literals to AST objects at build time, removing the runtime graphql-tag dependency.
// .babelrc or babel.config.js
module.exports = {
plugins: ['babel-plugin-graphql-tag']
};
// input source code
import gql from 'graphql-tag';
const query = gql`
query GetUser($id: ID!) {
user(id: $id) {
name
email
}
}
`;
// output after babel transform
const query = {
"kind": "Document",
"definitions": [
{
"kind": "OperationDefinition",
"operation": "query",
"variableDefinitions": [
{
"kind": "VariableDefinition",
"variable": { "kind": "Variable", "name": { "kind": "Name", "value": "id" } },
"type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "ID" } } },
"directives": []
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": { "kind": "Name", "value": "user" },
"arguments": [
{
"kind": "Argument",
"name": { "kind": "Name", "value": "id" },
"value": { "kind": "Variable", "name": { "kind": "Name", "value": "id" } }
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{ "kind": "Field", "name": { "kind": "Name", "value": "name" } },
{ "kind": "Field", "name": { "kind": "Name", "value": "email" } }
]
}
}
]
},
"directives": []
}
],
"loc": { "start": 0, "end": 4 }
};
Errors
Common errors & fixes
Error: Cannot find module 'graphql-tag'
graphql-tag is not installed in node_modules, or the plugin is trying to compile but graphql-tag is missing.
fixRun npm install graphql-tag --save-dev (or --save) to ensure it's available at build time.
TypeError: Cannot read property 'kind' of undefined
The GraphQL template literal is empty or malformed, causing the parser to return undefined.
fixEnsure the template literal contains valid GraphQL syntax. E.g., gql`query { foo }` Plugin babel-plugin-graphql-tag is not a function
The plugin was imported using ESM syntax (import) but Babel expects a CommonJS module.
fixUse the string name 'babel-plugin-graphql-tag' in plugins array, or require() it: plugins: [require('babel-plugin-graphql-tag')] SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): 'flow', 'typescript'
The input file uses TypeScript or Flow syntax without enabling the corresponding Babel parser plugin.
fixAdd @babel/preset-typescript or @babel/preset-flow to your Babel config.
Audit
Dependencies
@babel/coreoptionalBabel plugin requires @babel/core as a peer dependency for compilation.
graphql-tagoptionalRequired at build time for compilation; runtime dependency can be removed after compilation.