Question

我正在学习用html模板制作组件的reactjs，当我调用它们时，我收到此错误：

class App扩展！（function webpackMissingModule（）{var e = new Error（“ Cannot find module'./components'”）; e.code ='MODULE_NOT_FOUND'; throw e;}（））

请任何人让我知道为什么会发生

**App.js** 
import React from 'react';
import Component from './components';
import logo from './logo.svg';
import './App.css';
import About from './components/about';
import Blog from './components/blog';
import Contact from './components/contact';
import Footer from './components/footer';
import Home from './components/home';
import Menus from './components/menus';
import Projects from './components/projects';
import Reasearch from './components/reasearch';
import Services from './components/services';
import Testimonials from './components/testimonials';
import Welcome from './components/welcome';

class App extends Component {
 render() {
 return (
  <div id="colorlib-page">
    <div id="container-wrap">
    <Menus></Menus>
    <Welcome></Welcome>
    <Welcome></Welcome>
    <Services></Services>
    <Reasearch></Reasearch>     
    <Projects></Projects>
    <About></About>
    <Testimonials></Testimonials>
    <Blog></Blog>
    <Contact></Contact>
    <Footer></Footer>
    </div>
  </div>
  );
 }
}
export default App;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Arvind Pundir - A Fullstack Web & App Developer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" 
rel="stylesheet">

<link rel="stylesheet" href="%PUBLIC_URL%/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css">

<link rel="stylesheet" href="%PUBLIC_URL%/css/owl.carousel.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/owl.theme.default.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">

<link rel="stylesheet" href="%PUBLIC_URL%/css/aos.css">

<link rel="stylesheet" href="%PUBLIC_URL%/css/ionicons.min.css">

<link rel="stylesheet" href="%PUBLIC_URL%/css/flaticon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/icomoon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css">

<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root"></div>



 <!-- loader -->
 <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"> 
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/> 
<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" 
stroke="#F96D00"/></svg></div>


<script src="%PUBLIC_URL%/js/jquery.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery-migrate-3.0.1.min.js"></script>
<script src="%PUBLIC_URL%/js/popper.min.js"></script>
 <script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
 <script src="%PUBLIC_URL%/js/jquery.easing.1.3.js"></script>
 <script src="%PUBLIC_URL%/js/jquery.waypoints.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.stellar.min.js"></script>
<script src="%PUBLIC_URL%/js/owl.carousel.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.magnific-popup.min.js"></script>
<script src="%PUBLIC_URL%/js/aos.js"></script>
<script src="%PUBLIC_URL%/js/jquery.animateNumber.min.js"></script>
<script src="%PUBLIC_URL%/js/scrollax.min.js"></script>  
<script src="%PUBLIC_URL%/js/main.js"></script>

</body>

Answer 1

问题在于以下代码行：

import Component from './components';

请注意，这是大多数其他组件导入的目录：

import About from './components/about';
import Blog from './components/blog';
import Contact from './components/contact';
import Footer from './components/footer';
import Home from './components/home';
import Menus from './components/menus';
import Projects from './components/projects';
import Reasearch from './components/reasearch';
import Services from './components/services';
import Testimonials from './components/testimonials';
import Welcome from './components/welcome';

如果您没有在./components目录中提供组件的确切路径，则index.js目录中需要有一个./components文件，以便import Component from './components';正常工作。您可以从错误消息中看到这一点：

class App扩展！（function webpackMissingModule（）{var e = new Error（“ Cannot find module'./components'”）; e.code ='MODULE_NOT_FOUND'; throw e;}（））

这是在告诉您找不到与./components导入关联的import Component from './components';模块。在您的index.js目录中添加一个./components文件，其中包含该组件的必要代码，或者再次检查您输入的路径是否正确，即：

import Component from './components'<COMPONENT>;

其中<COMPONENT>是您要导入的组件的名称。

希望有帮助！

未捕获到的SyntaxError：意外的令牌'！' reactjs mainchunk.js

1 个答案: