I am trying to pile my react website. But whenever I try to build, it fails. I keep getting

Module not found: Can't resolve 'autosuggest-highlight/match'

I have react-drawer just outside where this file is, as well as my npm and node modules up to date. Every time I try to update the files, or make a change, it doesn't even start to pile and crashes at "react-script start".

This is the code for the page that crashed:

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 {  
    ponentDidMount() {  
        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 || '.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>
            )
    };    

This is the image of my folder hierarchy:

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"
     }
    }

I am trying to pile my react website. But whenever I try to build, it fails. I keep getting

Module not found: Can't resolve 'autosuggest-highlight/match'

I have react-drawer just outside where this file is, as well as my npm and node modules up to date. Every time I try to update the files, or make a change, it doesn't even start to pile and crashes at "react-script start".

This is the code for the page that crashed:

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 {  
    ponentDidMount() {  
        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./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>
            )
    };    

This is the image of my folder hierarchy:

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"
     }
    }

• javascript
• reactjs
• npm
• web
• node-modules

• Could you please provide some of your code, or create an minimal crashing example on github or something? Because I think you have somehow messed up with the import paths (local file imports from your projects do always have to start with a .), and imports from npm start with just the name (like autosuggest-hightlight). But I can't really see your directory structure. – Larce Commented Dec 14, 2017 at 13:18
• @Larce I added what you asked. I appreciate the help, thanks! – chadbrochill317 Commented Dec 14, 2017 at 13:39
• And you have installed autosuggest-highlight/match somewhere…? – deceze ♦ Commented Dec 14, 2017 at 13:46
• @deceze When I do it stops building entirely. I get the "react-script start" error when i run npm start. – chadbrochill317 Commented Dec 14, 2017 at 16:00
• If autosuggest-hightlight is installed, this code should work. Could you please try to run "npm install" and try it again, and show us your package.json if it doesn't work. – Larce Commented Dec 15, 2017 at 12:12

4 Answers 4

I had the same problem with the exact same package funnily enough. This is what I have that fixed it:

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

The dependency needs to be added it seems like:

npm i autosuggest-highlight

What solved the problem for me was to:

1. Delete node_modules directory
2. run npm install

Check-in official page document, following the way of import also working

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