Question

无法编译。

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

Answer 1

尝试执行npm i -S语义ui反应

-S是一个保存标志，它将保存到您在package.json中没有显示的依赖项中。

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

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

Answer 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

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

3 个答案: