Registry / web-framework / vite-plugin-jsonx

vite-plugin-jsonx

library1.2.2jsnpmunverified

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.

web-framework serialization

npm install vite-plugin-jsonx

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-JSONX

vite-plugin-jsonx

web-frameworkjavascriptv1.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

jsonX

✓ import { jsonX } from 'vite-plugin-jsonx'

✗ import jsonX from 'vite-plugin-jsonx'

Named export (not default). The plugin only exports a named function.

plugin type

✓ import type { UserConfig } from 'vite'; import { jsonX } from 'vite-plugin-jsonx'; export default { plugins: [jsonX()] } satisfies UserConfig

✗ export default { plugins: [jsonX] }

Must call jsonX() (invoke function) to get plugin instance; passing the function without parentheses will break.

client types reference

✓ /// <reference types="vite-plugin-jsonx/client" />

✗ import 'vite-plugin-jsonx/client'

Add to env.d.ts for TypeScript ambient module declarations for .jsonc/.json5 imports. Improper import won't augment types.

Sets up the plugin in vite.config.ts with optional parser options, imports a .json5 file, and logs its property.

// vite.config.ts import { defineConfig } from 'vite'; import { jsonX } from 'vite-plugin-jsonx'; export default defineConfig({ plugins: [ jsonX({ // optional: pass custom parser options json5ParserOptions: { quote: 'double' }, jsoncParserOptions: { reviver: (key, value) => value } }) ] }); // src/data.json5 { name: 'Example', version: 1.0, // comment } // src/main.ts import config from './data.json5'; console.log(config.name); // 'Example'

Debug

Known issues

gotchaThe 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.

fix

Change plugins: [jsonX] to plugins: [jsonX()]

affects: >=1.0.0

gotchaTypeScript users must add the client types reference in env.d.ts. Without it, importing .jsonc/.json5 files will cause TS error 'Cannot find module'.

fix

Add /// <reference types="vite-plugin-jsonx/client" /> to your env.d.ts

affects: >=1.0.0

breakingVite version requirement: Vite >=4.0.0. Using with older Vite versions will fail silently or break the build.

fix

Upgrade Vite to 4.0.0 or later.

affects: >=1.0.0

breakingNode version requirement: Node >=20. Older Node versions may encounter runtime errors because the package uses modern JS features.

fix

Upgrade Node.js to version 20 or higher.

affects: >=1.0.0

gotchaThe 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).

fix

Use import statements as shown in docs; for dynamic imports, use default property: const data = await import('./data.jsonc').then(m => m.default)

affects: >=1.0.0

Errors

Common errors & fixes

[vite] Internal server error: Plugin must be an object.

Passing jsonX (function reference) instead of jsonX() in plugins array.

fix

Change plugins: [jsonX] to plugins: [jsonX()].

Cannot find module './data.json5' or its corresponding type declarations.

Missing TypeScript ambient type declarations for .json5/.jsonc files.

fix

Add /// <reference types="vite-plugin-jsonx/client" /> to your env.d.ts file.

TypeError: jsonX is not a function

Incorrect import style (default import instead of named import).

fix

Use import { jsonX } from 'vite-plugin-jsonx' (named import).

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

viterequiredPeer dependency: Vite >=4.0.0 required for plugin compatibility.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-jsonx ↗