即使安装了依赖项，我的代码也不会呈现答案

【问题标题】：My code wont render even after installing dependencies即使安装了依赖项，我的代码也不会呈现
【发布时间】：2019-05-29 04:39:05
【问题描述】：

编译失败。

./src/components/Teachers.js 未找到模块：无法解析“C:\Users\user\Documents\GitHub\Portfolio\Rework1\src\components”中的“semantic-ui-react”

我不断收到此错误，我的代码可以正常工作，但我的依赖项似乎没有正确加载我运行了一些终端命令破坏了我的代码，请帮忙。

我尝试在 Node_Modules 文件夹中安装依赖项

import React from 'react';
import TeacherList from '../data/teachers';
import {  Badge, CardHeader,CardImg, CardFooter, CardBody,
 CardText,CardColumns,CardTitle,CardSubtitle,Row,Col, } from 'reactstrap';
 import { Button, Header, Modal } from 'semantic-ui-react'

 import { Card, Icon, Image } from 'semantic-ui-react'

import Description from './Description'
const Teachers = () => {
  let teachers = TeacherList.map((teacher) => {
    return (

<img className="teacher-img" src={teacher.img_src} alt="teacher" />
  <b className="projectTitle">{teacher.name}</b>
            <hr className="divider2 my-4"/>

          <a className="link" href={teacher.code} target="_blank"  rel="noopener noreferrer"><b> Code </b></a>
  <a  className="link code" href={teacher.live} target="_blank"  rel="noopener noreferrer"><b> Live </b></a>
  <CardFooter>
         <Badge color="primary" pill>{teacher.javascript}</Badge>
         <Badge color="secondary" pill>{teacher.html5}</Badge>
         <Badge color="success" pill>{teacher.bootstrap}</Badge>
         <Badge color="info" pill>{teacher.css3}</Badge>
         <Badge color="light ">{teacher.jquery}</Badge>




         </CardFooter>
</Card> */}
<Card>
    <div className="container3">
    <Image src={teacher.img_src} wrapped ui={false} />
    <Card.Content>
      <Card.Header>Daniel</Card.Header>
      <Card.Meta>Joined in 2016</Card.Meta>
      <Card.Description>
        Daniel is a comedian living in Nashville.
      </Card.Description>
    </Card.Content>
    <Card.Content extra>
      <a>
        <Icon name='user' />
        10 Friends
      </a>
    </Card.Content>
    </div>

  </Card>

</div>



    );
  }); 

  return (
    <div className="main-content">
      <h2>Projects </h2>
      <ul className="group">
        {teachers}    
      </ul>
    </div>
  );
}

export default Teachers;

Package.Json

{
  "name": "course-directory",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "1.0.6"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^5.0.0",
    "semantic-ui": "^2.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

【问题讨论】：

发布你的 package.json 文件

标签： javascript reactjs

【解决方案1】：

尝试做 npm i -S semantic-ui-react

-S 是一个保存标志，会将它保存到 package.json 中我看不到的依赖项中。

如果这不起作用，请尝试删除您的 node_modules 文件夹并使用 npm i 重新安装

【讨论】：

它在我的依赖中，现在我有语义 ui 2.4.2 但我仍然收到控制台错误
同样的控制台错误还是别的什么？代码现在可以工作了吗？

【解决方案2】：

也许试试这个，看起来你有很多语法错误。我没有运行它，但它可能会有所帮助。

const Teachers = () => {
  let teachers = TeacherList.map((teacher) => {
    return (
<div>
<img className="teacher-img" src={teacher.img_src} alt="teacher" />
<b className="projectTitle">{teacher.name}</b>
<hr className="divider2 my-4"/>

<a className="link" href={teacher.code} target="_blank"  rel="noopener noreferrer"><b> Code </b></a>
  <a  className="link code" href={teacher.live} target="_blank"  rel="noopener noreferrer"><b> Live </b></a>
  <CardFooter>
         <Badge color="primary" pill>{teacher.javascript}</Badge>
         <Badge color="secondary" pill>{teacher.html5}</Badge>
         <Badge color="success" pill>{teacher.bootstrap}</Badge>
         <Badge color="info" pill>{teacher.css3}</Badge>
         <Badge color="light ">{teacher.jquery}</Badge>
    </CardFooter>

<Card>
    <div className="container3">
    <Image src={teacher.img_src} wrapped ui={false} />
    <Card.Content>
      <Card.Header>Daniel</Card.Header>
      <Card.Meta>Joined in 2016</Card.Meta>
      <Card.Description>
        Daniel is a comedian living in Nashville.
      </Card.Description>
    </Card.Content>
    <Card.Content extra>
      <a>
        <Icon name='user' />
        10 Friends
      </a>
    </Card.Content>
    </div>

</Card>
</div>
    )}
    )

  return (
    <div className="main-content">
      <h2>Projects </h2>
      <ul className="group">
        {teachers}    
      </ul>
    </div>
  );
}

export default Teachers;

【讨论】：

这可能是一个很好的建议，但它不会运行，因为 package.json 文件中缺少 semantic-ui-react。

【解决方案3】：

在您的package.json 中有"semantic-ui": "some version num"。需要安装semantic-ui-react版本

    {
  "name": "course-directory",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "1.0.6"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^5.0.0",
    "semantic-ui": "^2.4.2" ---> needs to be "semantic-ui-react": "whatever version"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

改为运行npm i semantic-ui-react@latest

【讨论】：