Implementation of es6 modules, how to load json file

Question

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

Important code is as follows:

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, eg: // ['Mentone', 'Mill Park', 'Mordialloc'] setTimeout(() => callback(null, suggestions), 300); } 

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

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

If I choose the json prefix !:

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

Thus, during compilation, I did not receive errors (import completed). However, when I executed it, I got errors:

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

If I debug it, I see that the suburbs are an object c, not an array, so the filter function is not defined.

However, in the above example, sentences are an array. If I rewrite such sentences, 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 a json! does the prefix do in the import?

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

Answer 1

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:

1. In order not to add json-loader to each import you can add the line to webpack.config :

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

   Then import json files like this

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

2. Use json-loader directly with import , as in your example:

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

Note: in webpack 2.* rules must be used instead of keyword loaders .,

also webpack 2.* uses json-loader by default

* .json files are now supported without the json loader. You can still use it. This is not a turning point.

v2.1.0-beta.28

Answer 2

json-loader does not load the json file if it is an 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 ..... ]} 

Answer 3

It 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 }; }); 

Answer 4

With json-loader installed, now you can just use

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

or even easier

 import suburbs from '../suburbs'; 

Answer 5

Node v8.5. 0+

You do not need a JSON loader. The node provides ECMAScript modules (ES6 module support) with --experimental-modules , you can use it as follows

 node --experimental-modules myfile.mjs 

Then it is very simple.

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

Then you will be bound to the myJSON variable.

Answer 6

Found this thread when I was not able to load json-file using ES6 TypeScript 2.6 . I kept getting this error:

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

To make it work, I had to declare a module first. Hope this saves 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 skip loader from json-loader , I got the following error from webpack :

BREAKING CHANGE: It is no longer allowed to omit the suffix '-loader' 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