{"id":22808,"library":"vite-plugin-relay-lite","title":"vite-plugin-relay-lite","description":"A Vite plugin that provides a more convenient Relay experience by automatically transforming GraphQL template literals and integrating with the Relay compiler. Current stable version is 0.12.0, released with ESM defaults to match Relay Compiler v19 behavior. Supports Vite 2–7 and GraphQL 15/16. Key differentiators: lightweight, no need for .babelrc or relay-plugin, supports multiple config file formats (.config/relay.{js,json,yml}), and offers experimental features like automatic graphql tag imports. Actively maintained with frequent updates.","status":"active","version":"0.12.0","language":"javascript","source_language":"en","source_url":"https://github.com/cometkim/vite-plugin-relay-lite","tags":["javascript","vite","vite-plugin","relay","typescript"],"install":[{"cmd":"npm install vite-plugin-relay-lite","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-relay-lite","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-relay-lite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for GraphQL types and parsing","package":"graphql","optional":false},{"reason":"Peer dependency – runs as a Vite plugin","package":"vite","optional":false}],"imports":[{"note":"Default export is the plugin factory function. Named export 'relay' does not exist.","wrong":"import { relay } from 'vite-plugin-relay-lite'","symbol":"default","correct":"import relay from 'vite-plugin-relay-lite'"},{"note":"PluginOptions is a TypeScript type – use 'import type' for runtime safety. Available since v0.8.0.","wrong":"import { PluginOptions } from 'vite-plugin-relay-lite'","symbol":"PluginOptions","correct":"import type { PluginOptions } from 'vite-plugin-relay-lite'"},{"note":"Since v0.12.0, the package is ESM-only. Use import syntax, not require().","wrong":"const relay = require('vite-plugin-relay-lite') // CJS not supported in v0.12+; use ESM","symbol":"Vite Plugin Relay","correct":"import relay from 'vite-plugin-relay-lite'\n\nexport default defineConfig({\n  plugins: [relay()]\n})"}],"quickstart":{"code":"import relay from 'vite-plugin-relay-lite'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    relay({\n      // Optional: specify custom Relay config path (default: relay.config.js)\n      config: './.config/relay.json',\n      // Optional: enable experimental auto-import of graphql tag (since v0.8.0)\n      autoImportGraphQLTag: true,\n    })\n  ]\n})","lang":"typescript","description":"Shows how to add vite-plugin-relay-lite to a Vite config with optional settings like custom config path and auto-import of graphql tag."},"warnings":[{"fix":"Use ESM import syntax (import relay from 'vite-plugin-relay-lite') instead of require().","message":"v0.12.0 changed default to ES modules, breaking CJS require() imports.","severity":"breaking","affected_versions":">=0.12.0"},{"fix":"Remove the 'compact' option from plugin config. Use default behavior.","message":"The 'compact' option was deprecated in v0.10.0 and removed in v0.11.0.","severity":"deprecated","affected_versions":">=0.11.0"},{"fix":"Split multiple definitions into separate graphql tagged templates.","message":"Multiple query/fragment definitions in a single graphql tag are banned since v0.10.0.","severity":"gotcha","affected_versions":">=0.10.0"},{"fix":"Upgrade Node.js to version 18 or higher.","message":"v0.9.0 dropped support for Node < 18.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Remove explicit import of graphql from 'relay-runtime' if autoImportGraphQLTag is true.","message":"When using autoImportGraphQLTag (v0.8.0+), ensure graphql is not manually imported – it will be injected automatically.","severity":"gotcha","affected_versions":">=0.8.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure autoImportGraphQLTag: true is set in plugin options and that the file contains a graphql`...` expression.","cause":"The option must be set at plugin config, and the tag is only added to files that use graphql template literals.","error":"The 'graphql' tag from 'relay-runtime' is not auto-imported after enabling autoImportGraphQLTag."},{"fix":"Switch to ESM: use import syntax in .mjs files or set \"type\": \"module\" in package.json.","cause":"Package is ESM-only since v0.12.0, but you are using require() or a non-ESM environment.","error":"Error: Cannot find module 'vite-plugin-relay-lite' at ..."},{"fix":"Use default import: import relay from 'vite-plugin-relay-lite'.","cause":"Incorrect import: using { relay } instead of default import, or using require() which now returns ESM default.","error":"TypeError: relay is not a function at ..."},{"fix":"Create a relay.config.js file or specify a custom config path via the 'config' option.","cause":"The plugin expects a relay config file in the project root (default name relay.config.js).","error":"Relay configuration file not found: relay.config.js"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}