json5-loader

4.0.1 verified Sat Apr 25 auth: no javascript

A webpack loader for parsing JSON5 files into JavaScript objects. Supports modern JSON5 syntax including comments, trailing commas, and unquoted keys. Current stable version is 4.0.1 (released October 2020), requiring Node.js >= 10.13 and webpack ^4 || ^5. Replaced the built-in json-loader for JSON5 support. Key differentiator: integrates seamlessly with webpack's module system, offering esModule option for ES module output and enabling tree shaking. Maintained by the webpack-contrib organization with regular updates to schema-utils.

Common errors

error Module parse failed: Unexpected token (1:5) (The JSON5 file is not being processed) ↓

cause Missing `type: 'javascript/auto'` in webpack rule, causing webpack to parse JSON5 as JSON

fix

Add type: 'javascript/auto' to the loader rule in webpack.config.js

error Cannot find module 'json5-loader' ↓

cause json5-loader is not installed as a devDependency

fix

Run npm install json5-loader --save-dev

Warnings

breaking Node.js version < 10.13.0 is no longer supported ↓

fix Upgrade Node.js to version >= 10.13.0

breaking ES module syntax is used by default (esModule: true) since v4.0.0, which may break CommonJS bundles ↓

fix Set `esModule: false` in loader options if you need CommonJS output

breaking Minimum required Node.js version is 8.9.0 for v3.0.0 ↓

fix Upgrade Node.js or use earlier loader version

gotcha Missing `type: 'javascript/auto'` in webpack rule causes issues with webpack 5's default JSON handling ↓

fix Add `type: 'javascript/auto'` to the loader rule

deprecated await import() with inline loader syntax may not work in webpack 5 ↓

fix Use configuration-based rules instead of inline loader syntax

Install

npm install json5-loader

yarn add json5-loader

pnpm add json5-loader

Imports

json5-loader
wrong
```
const json5Loader = require('json5-loader')
```
correct
```
import json5Loader from 'json5-loader'
```
Loader is used in webpack config, not imported directly in source code.

webpack config rule

wrong

rules: [{ test: /\.json5$/, loader: 'json5-loader' }]

correct

rules: [{ test: /\.json5$/i, loader: 'json5-loader', type: 'javascript/auto' }]

The `type: 'javascript/auto'` is required to avoid conflicts with webpack 5's default JSON handling.

inline require
wrong
```
const data = require('./file.json5')
```
correct
```
const data = require('json5-loader!./file.json5')
```
Inline loader syntax is supported but configuration-based usage is recommended for clarity.

Quickstart

Shows how to configure webpack to load JSON5 files with json5-loader and import the parsed object.

// file.json5
{
  env: 'production',
  passwordStrength: 'strong',
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        type: 'javascript/auto',
      },
    ],
  },
};

// index.js
import appConfig from './file.json5';
console.log(appConfig.env); // 'production'