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! 접두사가 가져 오기에서 수행됩니까?

내 코드에 넣을 수없는 이유는 무엇입니까? 바벨 구성?