找不到模块：无法解析'autosuggest-highlight / match'

Posted 2023-02-06

我正在尝试编译我的反应网站。但每当我尝试构建时，它都会失败。我一直在

找不到模块：无法解析'autosuggest-highlight / match'

我有反应抽屉就在这个文件的外面，以及我的npm和节点模块是最新的。每次我尝试更新文件或进行更改时，它甚至都没有开始编译并在“react-script start”崩溃。

这是崩溃的页面的代码：

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

这是我的文件夹层次结构的图像：

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"
     
    

答案

有趣的是同一个包完全相同的问题。这是我修复它的原因：

import * as Autosuggest from "react-autosuggest";

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

另一答案

需要添加依赖关系似乎：

npm i autosuggest-highlight

另一答案

是什么解决了我的问题是：

1. 删除node_modules目录
2. 运行npm install