Registry /
web-framework / vite-plugin-graphql-loader
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default (graphqlLoader)
✓ import graphqlLoader from 'vite-plugin-graphql-loader'
✗ const graphqlLoader = require('vite-plugin-graphql-loader')
The plugin is ESM-only since v3.0.0. CommonJS require will fail with newer versions. Use import or dynamic import.
default import from .graphql file
✓ import ExampleQuery from './example.graphql'
✗ import { ExampleQuery } from './example.graphql'
Default import yields the first query/operation. Named imports for specific queries/fragments require explicit syntax see next entry.
named imports from .graphql file
✓ import { MyQuery, MyFragment } from './example.graphql'
✗ import { MyQuery } from './example.graphql'
Named imports correspond to the operation names defined in the GraphQL file. Default export still exists for the first operation.
_queries and _fragments
✓ import Doc, { _queries, _fragments } from './example.graphql'
Underscore-prefixed exports provide maps of all queries and fragments by name, typed via the module declaration pattern.
Shows how to install and configure the plugin, then import a GraphQL file and use it with Apollo Client.
// vite.config.ts
import { defineConfig } from 'vite';
import graphqlLoader from 'vite-plugin-graphql-loader';
export default defineConfig({
plugins: [graphqlLoader()],
});
// App.ts
import MyQuery from './query.graphql';
import { useQuery } from '@apollo/client';
function App() {
const { loading, data } = useQuery(MyQuery);
return <div>{JSON.stringify(data)}</div>;
}
Errors
Common errors & fixes
Top-level await is not available in the configured target environment
Using a version before 3.0.1 with older bundlers or targets that don't support top-level await.
fixUpgrade to v3.0.1 or later, or set a modern output target.
Module not found: Error: Can't resolve 'graphql'
graphql is not installed (required as peer dependency since v5.0.0).
fixRun npm install graphql or yarn add graphql.
ERR_REQUIRE_ESM: require() of ES Module from ... not supported
Using CommonJS require() with v3.0.0+ which is ESM-only.
fixSwitch to import syntax or downgrade to v2.0.x.
The requested module 'vite-plugin-graphql-loader' does not provide an export named 'default'
CommonJS default import mismatch; attempted const { default: graphqlLoader } = require(...) incorrectly.
fixUse import graphqlLoader from 'vite-plugin-graphql-loader' in an ESM context.
Audit
Dependencies
graphqlrequiredPeer dependency required at runtime to operate on DocumentNode objects; breaking change in v5.0.0 moved it from dependency to peer.
viterequiredPeer dependency; the plugin is designed to work with Vite 5, 6, 7, or 8.