[解決済み] ES6モジュールの実装、jsonファイルの読み込み方法

質問

の例を実装しています。 https://github.com/moroshko/react-autosuggest

重要なコードはこのようなものです。

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

この例からのコピーペーストのコード（それは動作します）は、私のプロジェクトでエラーを持っています。

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

接頭辞のjsonを取ると！？

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

この方法では、コンパイル時にエラーは出ませんでした（インポートが完了している）。 しかし、実行するとエラーが発生します。

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

デバッグしてみると、suburbsは配列ではなくobjectcなので、filter関数が定義されていないことがわかります。

しかし、この例ではsuggestionsは配列であるとコメントされています。このようにsuggestionsを書き換えると、すべてうまくいきます。

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

で...json!prefixはimportでどうなってるんだ？

なぜ、私のコードにそれを置くことができないのでしょうか？何らかのバベルの設定？

どのように解決するのですか？

まず最初に json-loader :

npm i json-loader --save-dev

では、どのように使うかというと、2つの方法があります。

1. を追加しないようにするために json-loader を追加しないようにするため、各 import に追加することができます。 webpack.config という行を追加します。

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

   次に、インポートする json のようなファイルをインポートします。

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

2. 使用方法 json-loader の中に直接 import に直接記述します。

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

注意 で webpack 2.* キーワードの代わりに loaders を使用する必要があります。 rules .,

また webpack 2.* は json-loader をデフォルトで使用します。

*.json ファイルは、json-loader なしでサポートされるようになりました。まだ使用することができます。壊れるような変更ではありません。

v2.1.0-beta.28