Load a JSON File with ES6 Modules Implementation

In this guide, you will learn how to access or consume any JSON file by implementing the ES6 standard.

Sep 29, 2020 • 4 Minute Read

Introduction

ES6 is a common standard for JavaScript; it’s also called ECMAScript 2015, with the first version released in 2011. ES6 adds extensive features to make JavaScript app development more accessible. Most JavaScript-based frameworks, libraries, and the vanilla JavaScript app follow the ECMAScript standard. During web development, accessing JSON files is an ordinary operation, and consuming JSON files is allowed using ES6 implementation.

In this guide, you will learn how to access or consume any JSON file by implementing the ES6 standard.

Import JSON File Using NPM Package

JSON files contain a key-value pair, and there is a parent key that represents the parent node of the JSON file.

In React, if you want to load the JSON file without using the existing webpack settings, can make use of a third-party NPM package. One popular package is json-loader.

      npm install json-loader

In this guide, we will be using sample JSON data stored in the Data.json file.

      {
  "data": {
    "category1": {
      "name": "test123",
      "title": "this is category 123"
    },
    "category2": {
      "name": "test456",
      "title": "this is category 456"
    },
    "category3": {
      "name": "test789",
      "title": "this is category 789"
    }
  }
}
    

After the above JSON file is created, it will be available to import and use into existing React components.

      import React, { Component } from "react";
// Custom JSON file
import Data from "./data";

export class ImportJsonFile extends Component {
    render() {
        console.log(Data) // will print the JSON file content
        return (
            <>
                <div>
                    // Use JSON data here
                </div>
            </>
        );
    }
}

export default ImportJsonFile;
    

Notice the ES6 import statement that imports the local JSON file, which you created previously. Using the ES6 import statement along with the json-loader, any JSON file can be consumed into the React app.

Import JSON File Using Webpack Config

The basic webpack config rule with the json5-loader is configured as defined below.

If your React app uses a webpack config version > 2.0.0, then there is no need to install json-loader because webpack uses json5-loader by default when its configured with the React app.

Note: webpack.config.js is sourced from here .

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

In the webpack config file, the loader rule accepts the NPM package to load any of the JSON files in your app. One package used is called json5-loader.

Along with the loader rule, there are two other rules, one of which is test.

      test: /\.json5$/i,

That identifies the file format of the JSON or gives a warning at the time of compilation.

There is an additional Boolean option available called esModule, which is used to define whether the module should be ECMAScript-supported or not.

The basic setting for esModule is shown below.

      module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        options: {
          esModule: true,
        },
        type: 'javascript/auto',
      },
    ],
  },
}
    

By maintaining the rules with a webpack, the React app is configured to access the JSON file from the physical app location by verifying its file extension and the default JSON loading library.

Conclusion

React app uses various ES6 features, such as let, const, spread operator, arrow function, class, and literals, so your app should be well configured to support the JSON file format.

Webpack configuration is the right approach to allow JSON files to be imported into a React app with ES6 implementation Try configuring webpack on your own to access the JSON files.