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

デバッグすると、郊外は配列ではなくObjectcであることがわかります。そのため、フィルター関数は定義されていません。

ただし、この例ではコメント付きの提案は配列です。このような提案を書き直すと、すべてが機能します。

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

だから...なんてjson！プレフィックスはインポートで実行されていますか？

コードに入れられないのはなぜですか？いくつかのbabel構成？

まず最初にインストールする必要があります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

json-loaderは、配列の場合はjsonファイルをロードしません。この場合、たとえば、キーがあることを確認する必要があります。

{
    "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 .....
]}

これはReact＆ReactNativeでのみ機能します

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

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


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

でjson-loaderインストールされ、今、あなたは、単に使用することができます。

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

または、さらに簡単に：

import suburbs from '../suburbs';

私は読み込むことができませんでした。このスレッド見つけjson-fileてをES6 TypeScript 2.6。私はこのエラーを受け取り続けました：

TS2307（TS）モジュール 'json-loader！./ suburbs.json'が見つかりません

それを機能させるには、最初にモジュールを宣言する必要がありました。これが誰かのために数時間を節約することを願っています。

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

...

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

私はオミットしようとした場合loaderのjson-loaderIから、次のエラーを得ましたwebpack：

重大な変更：ローダーを使用するときに「-loader」サフィックスを省略できなくなりました。「json」の代わりに「json-loader」を指定する必要があります。https： //webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removedを参照してください。

ノードv8.5.0 +

JSONローダーは必要ありません。ノードはECMAScriptモジュール（ES6モジュールサポート）に--experimental-modulesフラグを提供します。次のように使用できます

node --experimental-modules myfile.mjs

それからそれは非常に簡単です

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

次に、それを変数にバインドしますmyJSON。