json-loader

0.5.7 verified Sat Apr 25 auth: no javascript deprecated

A webpack loader for importing JSON files into JavaScript modules. Version 0.5.7 (latest, stable) is effectively deprecated because webpack >= v2.0.0 natively supports JSON imports. The loader is only useful for custom file extensions or legacy webpack v1 projects. It has minimal maintenance and no active development since 2017. Alternative: rely on webpack's built-in JSON support.

Common errors

error Module parse failed: Unexpected token (1:1) You may need an appropriate loader to handle this file type. ↓

cause When webpack v1 is used without json-loader, it cannot parse JSON files.

fix

Add json-loader to webpack config with test: /\.json$/.

error DeprecationWarning: json-loader is deprecated. Since webpack v2, JSON files are supported by default. ↓

cause Using json-loader with webpack v2 or later triggers a deprecation warning.

fix

Remove json-loader from config and let webpack handle JSON natively.

error Cannot find module 'json-loader' ↓

cause json-loader is not installed or not in node_modules.

fix

Run: npm install --save-dev json-loader

Warnings

deprecated json-loader is deprecated as webpack v2+ includes JSON support natively. ↓

fix For webpack v2+, remove json-loader and use built-in JSON handling. If you need a custom file extension, use a different loader.

breaking The loader previously used tab indentation in stringified JSON, which was changed to spaces for performance. ↓

fix Update to latest version (0.5.7). This change affects file size but not functionality.

gotcha Inline require('json-loader!./file.json') works in webpack v1 but not in v2+ where JSON is handled differently. ↓

fix For webpack v2+, do not use json-loader; just require the JSON file directly.

Install

npm install json-loader

yarn add json-loader

pnpm add json-loader

Imports

json-loader (loader reference)
wrong
```
require('json-loader') directly in code (not a JS module)
```
correct
```
In webpack config: { test: /\.json$/, loader: 'json-loader' }
```
In webpack v1, this loader is needed. Since webpack v2, JSON files work without this loader.

Inline usage

wrong

const json = require('json-loader')(require('./file.json'));

correct

const json = require('json-loader!./file.json');

Inline usage is for webpack v1; in v2+ just require the JSON file directly.

Default import (ES modules)
wrong
```
import jsonLoader from 'json-loader'
```
correct
```
import 'json-loader' (no direct use; configured in webpack)
```
json-loader is not a JavaScript module to import; it's a webpack loader referenced in config.

Quickstart

Shows how to configure json-loader in webpack v1 to import JSON files.

// webpack.config.js (webpack v1)
module.exports = {
  entry: './app.js',
  output: { filename: 'bundle.js' },
  module: {
    loaders: [
      { test: /\.json$/, loader: 'json-loader' }
    ]
  }
};

// app.js
var data = require('./data.json');
console.log(data);