Я реалізую приклад з 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

Тоді є два способи, як його використовувати:

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 & React Native

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-loaderя отримав таку помилку від webpack:

ЗЛИШКА ЗМІНИ: Забороняється пропускати суфікс '-loader' під час використання навантажувачів. Вам потрібно вказати 'json-loader' замість 'json', див. Https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Вузол v8.5.0 +

Вам не потрібен завантажувач JSON. Вузол забезпечує ECMAScript модулів (підтримка ES6 Module) з --experimental-modulesпрапором, ви можете використовувати його , як це

node --experimental-modules myfile.mjs

Тоді це дуже просто

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

Тоді він буде прив’язаний до змінної myJSON.