ES6 modules implementation, how to load a json file

Question

I'm implementing an example from https://github.com/moroshko/react-autosuggest

Important code is like this:

import React, { Component } from 'react';
import suburbs from 'json!../suburbs.json';

function getSuggestions(input, callback) {
  const suggestions = suburbs
    .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))
    .sort((suburbObj1, suburbObj2) =>
      suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) -
      suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput)
    )
    .slice(0, 7)
    .map(suburbObj => suburbObj.suburb);

  // 'suggestions' will be an array of strings, e.g.:
  //   ['Mentone', 'Mill Park', 'Mordialloc']

  setTimeout(() => callback(null, suggestions), 300);
}

This copy-paste code from the example (that works), has an error in my project:

Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components

If I take out the prefix json!:

import suburbs from '../suburbs.json';

This way I got not errors at compile time (import is done). However I got errors when I execute it:

Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function

If I debug it I can see suburbs is an objectc, not an array so filter function is not defined.

However in the example is commented suggestions is an array. If I rewrite suggestions like this, everything works:

  const suggestions = suburbs
  var suggestions = [ {
    'suburb': 'Abbeyard',
    'postcode': '3737'
  }, {
    'suburb': 'Abbotsford',
    'postcode': '3067'
  }, {
    'suburb': 'Aberfeldie',
    'postcode': '3040'
  } ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))

So... what json! prefix is doing in the import?

Why can't I put it in my code? Some babel configuration?

Please, please, please re-evaluate the chose answer this is actually want you're using ES6 modules. You don't need anything at all, just a JS that understands ES6 modules. stackoverflow.com/a/53878451/124486 — Evan Carroll
– Evan Carroll, Commented Dec 21, 2018 at 2:27

eouw0o83hf · Accepted Answer · 2018-11-15 21:27:29Z

168

First of all you need to install json-loader:

npm i json-loader --save-dev

Then, there are two ways how you can use it:

In order to avoid adding json-loader in each import you can add to webpack.config this line:

loaders: [
  { test: /\.json$/, loader: 'json-loader' },
  // other loaders 
]

Then import json files like this

import suburbs from '../suburbs.json';

Use json-loader directly in your import, as in your example:
```
import suburbs from 'json!../suburbs.json';
```

Note: In webpack 2.* instead of keyword loaders need to use rules.,

also webpack 2.* uses json-loader by default

*.json files are now supported without the json-loader. You may still use it. It's not a breaking change.

v2.1.0-beta.28

edited Nov 15, 2018 at 21:27

eouw0o83hf

9,6085 gold badges57 silver badges78 bronze badges

answered Nov 11, 2015 at 12:23

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nbkhope Over a year ago

Thank you so much! The documentation for json-loader was actually showing the settings for webpack v2, so nothing worked for me (using v1!). So for all of you out there, use loaders, not rules! Plus, change 'use' inside that object to be 'loader', just like this answer!

cvetanov Over a year ago

As @alexander-t mentioned, you can now import json files without the json-loader, but, if you run into an issue where the json-loader is not recognized, you should just add a '-loader' suffix in the loaders config like this: { test: /\.json$/, loader: 'json-loader' }

Blue Over a year ago

Why doesn't the imported json get copied into outDir if it's being imported via typescript?

Benur21 Over a year ago

What if you don't have a webpack.config?

DmitrySemenov · Accepted Answer · 2017-02-03 20:43:14Z

json-loader doesn't load json file if it's array, in this case you need to make sure it has a key, for example

{
    "items": [
    {
      "url": "https://api.github.com/repos/vmg/redcarpet/issues/598",
      "repository_url": "https://api.github.com/repos/vmg/redcarpet",
      "labels_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/labels{/name}",
      "comments_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/comments",
      "events_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/events",
      "html_url": "https://github.com/vmg/redcarpet/issues/598",
      "id": 199425790,
      "number": 598,
      "title": "Just a heads up (LINE SEPARATOR character issue)",
    },
    ..... other items in array .....
]}

how is this an answer??? if it doesnt load this particular json file, then what is way to load such json file???

Kiko Seijo · Accepted Answer · 2018-04-29 12:18:15Z

10

This just works on React & React Native

const data = require('./data/photos.json');

console.log('[-- typeof data --]', typeof data); // object


const fotos = data.xs.map(item => {
    return { uri: item };
});

answered Apr 29, 2018 at 12:18

Kiko Seijo

7018 silver badges11 bronze badges

Comments

Let Me Tink About It · Accepted Answer · 2020-05-10 06:19:39Z

5

With json-loader installed, now you can simply use:

import suburbs from '../suburbs.json';

or, even more simply:

import suburbs from '../suburbs';

edited May 10, 2020 at 6:19

answered Aug 20, 2018 at 15:19

Let Me Tink About It

16.3k23 gold badges109 silver badges221 bronze badges

Comments

Evan Carroll · Accepted Answer · 2018-12-21 02:26:30Z

3

Node v8.5.0+

You don't need JSON loader. Node provides ECMAScript Modules (ES6 Module support) with the --experimental-modules flag, you can use it like this

node --experimental-modules myfile.mjs

Then it's very simple

import myJSON from './myJsonFile.json';
console.log(myJSON);

Then you'll have it bound to the variable myJSON.

answered Dec 21, 2018 at 2:26

Evan Carroll

1

1 Comment

nCoder Over a year ago

What about using this? import * as myJSON from './myJsonFile.json';

Ogglas · Accepted Answer · 2017-12-25 22:53:05Z

Found this thread when I couldn't load a json-file with ES6 TypeScript 2.6. I kept getting this error:

TS2307 (TS) Cannot find module 'json-loader!./suburbs.json'

To get it working I had to declare the module first. I hope this will save a few hours for someone.

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import suburbs from 'json-loader!./suburbs.json';

If I tried to omit loader from json-loader I got the following error from webpack:

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'json-loader' instead of 'json', see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Collectives™ on Stack Overflow

ES6 modules implementation, how to load a json file

6 Answers 6

4 Comments

2 Comments

Comments

Comments

Node v8.5.0+

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

2 Comments

Comments

Comments

Node v8.5.0+

1 Comment

Comments

Linked

Related