Ich implementiere ein Beispiel von https://github.com/moroshko/react-autosuggest

Wichtiger Code ist wie folgt:

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

Dieser Code zum Kopieren und Einfügen aus dem Beispiel (der funktioniert) hat einen Fehler in meinem Projekt:

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

Wenn ich das Präfix json herausnehme!:

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

Auf diese Weise habe ich beim Kompilieren keine Fehler erhalten (der Import ist abgeschlossen). Bei der Ausführung sind jedoch Fehler aufgetreten:

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

Wenn ich es debugge, sehe ich, dass Vororte ein Objektc und kein Array sind, sodass die Filterfunktion nicht definiert ist.

Im Beispiel wird jedoch kommentiert, dass Vorschläge ein Array sind. Wenn ich solche Vorschläge umschreibe, funktioniert alles:

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

Also ... was für ein Json! Präfix macht im Import?

Warum kann ich es nicht in meinen Code einfügen? Eine Babel-Konfiguration?

Zunächst müssen Sie installieren json-loader:

npm i json-loader --save-dev

Dann gibt es zwei Möglichkeiten, wie Sie es verwenden können:

1. Um zu vermeiden, dass Sie json-loaderjeweils importetwas hinzufügen, können Sie webpack.configdieser Zeile Folgendes hinzufügen :

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

   Importieren Sie dann solche jsonDateien

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

2. Verwenden Sie json-loaderdirekt in Ihrem import, wie in Ihrem Beispiel:

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

Hinweis: In webpack 2.*anstelle von Schlüsselwort loadersmuss verwendet werden rules.,

auch webpack 2.*verwendet json-loaderstandardmäßig

* .json-Dateien werden jetzt ohne den json-loader unterstützt. Sie können es weiterhin verwenden. Es ist keine bahnbrechende Veränderung.

v2.1.0-beta.28

json-loader lädt keine json-Datei, wenn es sich um ein Array handelt. In diesem Fall müssen Sie beispielsweise sicherstellen, dass es einen Schlüssel enthält

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

Dies funktioniert nur bei 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 };
});

Mit json-loaderinstalliert, können Sie jetzt einfach verwenden:

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

oder noch einfacher:

import suburbs from '../suburbs';

Fand diesen Thread , wenn ich nicht laden konnte json-filemit ES6 TypeScript 2.6. Ich bekam immer wieder diesen Fehler:

TS2307 (TS) Modul 'json-loader! ./ suburbs.json' kann nicht gefunden werden.

Damit es funktioniert, musste ich zuerst das Modul deklarieren. Ich hoffe, das spart jemandem ein paar Stunden.

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

...

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

Wenn ich weglassen versuche loaderaus json-loaderIch habe die folgenden Fehler aus webpack:

BREAKING CHANGE: Bei Verwendung von Loadern darf das Suffix '-loader' nicht mehr weggelassen werden. Sie müssen 'json-loader' anstelle von 'json' angeben, siehe https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Knoten v8.5.0 +

Sie benötigen keinen JSON-Loader. Node stellt ECMAScript-Modulen (ES6-Modulunterstützung) das --experimental-modulesFlag zur Verfügung. Sie können es so verwenden

node --experimental-modules myfile.mjs

Dann ist es sehr einfach

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

Dann haben Sie es an die Variable gebunden myJSON.