Modulo non trovato: impossibile risolvere 'autosuggest-highlight / match' - javascript, reactjs, npm, sito Web, moduli nodo

Sto cercando di compilare il mio sito web di reazione. Ma ogni volta che provo a costruire, fallisce. Continuo a ricevere

Modulo non trovato: non può risolvere "autosuggest-highlight / match"

Ho reagito-cassetto appena fuori da dove questo fileè, così come i miei npm e moduli di nodo aggiornati. Ogni volta che cerco di aggiornare i file, o di apportare modifiche, non inizia nemmeno a compilare e si blocca su "react-script start".

Questo è il codice per la pagina che si è arrestata in modo anomalo:

import React from "react";
import Autosuggest from "react-autosuggest";
import * as AutosuggestHighlightMatch from "autosuggest-highlight/match";
import * as AutosuggestHighlightParse from "autosuggest-highlight/parse";
import ApiRequest from "./ApiRequest.js";

class Search extends React.Component {
componentDidMount() {
new ApiRequest("GET", "/clientlist").send((res, people) => {
if (res.status == 200) {
this.setState({people});
} else if (res.status == 401 || res.status == 403) {
console.log("authentication error");
}
});
}

constructor() {
super();

this.state = {
value: "",
suggestions: [],
people: [],
selection: ""
};

this.renderSuggestion = (suggestion, {query}) => {
const suggestionText = `${suggestion.name}`;
const matches = AutosuggestHighlightMatch(suggestionText,query);
const parts = AutosuggestHighlightParse(suggestionText, matches);

return (
<span className="suggestion-content "
style={{backgroundImage: `url(${suggestion.profileimg || "http://s3.amazonaws.com/37assets/svn/765-default-avatar.png"})`}}>
<span className="name">
{
parts.map((part, index) => {
const className = part.highlight ? "highlight" : null;

return (
<span className={className} key={index}>{part.text}</span>
);
})
}
</span>
</span>
)
};

Questa è l'immagine della mia gerarchia di cartelle:

Here is my Package.Json
{
"name": "medimo",
"version": "0.1.0",
"private": true,
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"chart.js": "^2.6.0",
"es6-object-assign": "^1.1.0",
"history": "^1.17.0",
"moment": "^2.18.1",
"parse-react": "^0.5.2",
"parse-server": "^2.5.3",
"parse5": "^3.0.2",
"postcss": "^6.0.9",
"postcss-cssnext": "^3.0.2",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-chartjs-2": "^2.5.7",
"react-dom": "^15.6.1",
"react-dropdown": "^1.2.5",
"react-image": "^1.0.1",
"react-motion-drawer": "file:../custom-deps/react-motion-drawer",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-sortable-hoc": "^0.6.7",
"react-tabs": "^1.1.0",
"socket.io-client": "^2.0.3",
"socket.io-react": "^1.2.0",
"utils": "^0.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}

risposte:

Ho avuto lo stesso problema con lo stesso identico pacchetto abbastanza stranamente. Questo è quello che ho che lo ha risolto:

import * as Autosuggest from "react-autosuggest";

import AutosuggestHighlightMatch from "autosuggest-highlight/umd/match";
import AutosuggestHighlightParse from "autosuggest-highlight/umd/parse";