时间戳

首页 > 解决方案 > Uncaught SyntaxError: Unexpected token '!' reactjs mainchunk.js

reactjs - Uncaught SyntaxError: Unexpected token '!' reactjs mainchunk.js

问题描述

I am learning reactjs I have made components from a html template, when I am calling them I am receiving this error:

class App extends !(function webpackMissingModule() { var e = new Error("Cannot find module './components'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())

Please any one let me know why this is occurring 

**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>

标签： reactjs

解决方案

The issue is with this line of code:

import Component from './components';

Notice that this is a directory for most of your other component imports:

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

If you don't give an exact path to a component within your ./components directory there needs to be an index.js file within your ./components directory for the import Component from './components'; to work correctly. You can see this from your error message:

class App extends !(function webpackMissingModule() { var e = new Error("Cannot find module './components'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())

This is telling you it can't find the ./components module associate with the import Component from './components'; import. Either add an index.js file within your ./components directory containing the necessary code for said component or double check that your path is correct for said import, i.e.: 

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

where <COMPONENT> is the name of the component you meant to import.

Hopefully that helps!

推荐阅读