{"id":22710,"library":"vite-plugin-jsonx","title":"vite-plugin-jsonx","description":"A Vite plugin (v1.2.2) that enables importing JSON5 and JSONC files as ES modules in Vite projects. Supports customizable parser options for both formats, ships TypeScript declarations, and requires Vite >=4.0.0 and Node >=20. Released under MIT, maintained on GitHub. Compared to raw JSON imports, it allows comments, trailing commas, and relaxed syntax while integrating seamlessly with Vite's build pipeline.","status":"active","version":"1.2.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-jsonx","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-jsonx","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-jsonx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: Vite >=4.0.0 required for plugin compatibility.","package":"vite","optional":false}],"imports":[{"note":"Named export (not default). The plugin only exports a named function.","wrong":"import jsonX from 'vite-plugin-jsonx'","symbol":"jsonX","correct":"import { jsonX } from 'vite-plugin-jsonx'"},{"note":"Must call jsonX() (invoke function) to get plugin instance; passing the function without parentheses will break.","wrong":"export default { plugins: [jsonX] }","symbol":"plugin type","correct":"import type { UserConfig } from 'vite'; import { jsonX } from 'vite-plugin-jsonx'; export default { plugins: [jsonX()] } satisfies UserConfig"},{"note":"Add to env.d.ts for TypeScript ambient module declarations for .jsonc/.json5 imports. Improper import won't augment types.","wrong":"import 'vite-plugin-jsonx/client'","symbol":"client types reference","correct":"/// <reference types=\"vite-plugin-jsonx/client\" />"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { jsonX } from 'vite-plugin-jsonx';\n\nexport default defineConfig({\n  plugins: [\n    jsonX({\n      // optional: pass custom parser options\n      json5ParserOptions: { quote: 'double' },\n      jsoncParserOptions: { reviver: (key, value) => value }\n    })\n  ]\n});\n\n// src/data.json5\n{\n  name: 'Example',\n  version: 1.0,\n  // comment\n}\n\n// src/main.ts\nimport config from './data.json5';\nconsole.log(config.name); // 'Example'","lang":"typescript","description":"Sets up the plugin in vite.config.ts with optional parser options, imports a .json5 file, and logs its property."},"warnings":[{"fix":"Change plugins: [jsonX] to plugins: [jsonX()]","message":"The plugin must be invoked (jsonX()) not passed as reference. If you pass jsonX without parentheses, Vite will throw an error: 'Plugin must be an object'. Ensure you call the function.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add /// <reference types=\"vite-plugin-jsonx/client\" /> to your env.d.ts","message":"TypeScript users must add the client types reference in env.d.ts. Without it, importing .jsonc/.json5 files will cause TS error 'Cannot find module'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Vite to 4.0.0 or later.","message":"Vite version requirement: Vite >=4.0.0. Using with older Vite versions will fail silently or break the build.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Upgrade Node.js to version 20 or higher.","message":"Node version requirement: Node >=20. Older Node versions may encounter runtime errors because the package uses modern JS features.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use import statements as shown in docs; for dynamic imports, use default property: const data = await import('./data.jsonc').then(m => m.default)","message":"The imported content is a plain object, not a special module shape. Ensure your code expects the correct data structure (e.g., default export is the parsed JSON object).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Change plugins: [jsonX] to plugins: [jsonX()].","cause":"Passing jsonX (function reference) instead of jsonX() in plugins array.","error":"[vite] Internal server error: Plugin must be an object."},{"fix":"Add /// <reference types=\"vite-plugin-jsonx/client\" /> to your env.d.ts file.","cause":"Missing TypeScript ambient type declarations for .json5/.jsonc files.","error":"Cannot find module './data.json5' or its corresponding type declarations."},{"fix":"Use import { jsonX } from 'vite-plugin-jsonx' (named import).","cause":"Incorrect import style (default import instead of named import).","error":"TypeError: jsonX is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}