Question

我使用facebook create react app来构建我的第一个Web应用程序。

我正在尝试加载像Nav.js，Hero.js和About.js这样的js组件，并将它们导入index.js。

我的Github回购：https://github.com/brandonpowell/main-kdrusha-website

问题：您可能需要一个合适的加载程序来处理此文件类型。

webpackHotDevClient.js:233 Error in ./components/About.js
Module parse failed: /Users/brandonpowell/Desktop/main-kdrusha-website/components/About.js Unexpected token (6:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:6)
 @ ./src/index.js 41:13-43

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import  configureStore  from '../src/soundcloud/stores/configureStore';
import * as actions from '../src/soundcloud/actions';
import Stream from '../src/soundcloud/components/Stream'; // This are the Tracks that render
import Nav from '../components/Nav';
import Hero from '../components/Hero';
import About from '../components/About';

export const tracks = [
  {
    title: 'Some track'
  },
  {
    title: 'Some other track'
  }
];

const store = configureStore();
store.dispatch(actions.setTracks(tracks));// This is store the information to the Tracks

export default class App extends React.Component {
  render() {
    return(
      <div>
        <Nav />
        <Hero />
        <About />
        <Provider store={store}> <Stream /> </Provider>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('main'))

Nav.js

import React from 'react';

export default class Nav extends React.Component {
  render() {
    return(
         <nav>
            <div className="logo"></div>

            <div className="social-media-icons">
               <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
               <li><i class="fa fa-youtube" aria-hidden="true"></i></li>
               <li><i class="fa fa-instagram" aria-hidden="true"></i></li>
               <li><i class="fa fa-spotify" aria-hidden="true"></i></li>
               <li><i class="fa fa-soundcloud" aria-hidden="true"></i></li>
               <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
               <li><i class="fa fa-apple" aria-hidden="true"></i></li>
            </div>
         </nav>
    );
  }
}

Hero.js

import React from 'react';


export default class Hero extends React.Component {
  render() {
    return (
        <div className="wrapper">
            <div className="welcome-title">Official Website For</div>
            <div className="artist-name">KD Rusha</div>
        </div>
    );
  }
}

About.js

import React from 'react';

export default class About extends React.Component {
  render() {
    return (
      <div className="row">
         <section className="aboutartist col-inline">
            <div className="imageHere"></div>

            <article className="bio">
              <div className="bioTitle">Biography</div>
              <div className="line"></div>
              <p>KD Rusha is a hip hop artist from San Diego, California. At the age of 17, KD found his knack for music and began to make songs as a hobby. As the year 2012 progressed into 2013, KD found the hobby to become a passion. He released his first project, "Vengeance", in 2012 and it was a little known project that sprawled his high school campus with decent reception.</p>
              <p>Later that year, he released "Throwback", a mixtape that reached the internet with open arms with the major records being "Never Felt the Pain" and "You Already Know" both of which were produced by T-Customz. In 2013, KD saw a growth in his fanbase when he released his next project, "Livelihood". This was the mark of KD finding his own style of music rather than copying his inspirations.</p>
              <p>On December 28, 2013, he released his biggest song to date, "One of These Days" which met the internet as well as the local San Diego </p>
            </article>
         </section>

         <div className="gallery-section col-inline">
            <div className="titlebox">
                <div className="titlegalleryleft">Gallery</div>
                <div className="titlegalleryright">All Images</div>
            </div>
         </div>
       </div>
    );
  }
}

Answer 1

只需将您的组件目录移动到src目录中即可。这很奇怪，因为它不应该在webpack设置上发生，但它是issue with creact-react-app。你也不应该将部分源放在src之外。

解决方案

将$('#localStorageTest').submit(function() { var fullname = $('#fullname').val(); var email = $('#email').val(); if(fullname) { //fullname has a value } });目录移至components并引用index.js中的文件，如下所示

src

注意我还修改了soundcloud目录的路径。您无需向后移动目录，然后返回以引用它。

此外，如果您在进行此修复时运行服务器（import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import configureStore from './soundcloud/stores/configureStore'; import * as actions from './soundcloud/actions'; import Stream from './soundcloud/components/Stream'; // This are the Tracks that render import Nav from './components/Nav'; import Hero from './components/Hero'; import About from './components/About';或yarn start），则应停止并重新启动它，否则您将收到“找不到模块”错误。

Answer 2

项目文件夹位于项目的错误位置。将您的组件文件夹移动到src文件夹中，并将路径格式'../components/Nav'更改为'./components/Nav'（从../形式更改为./）。

ReactJS错误您可能需要适当的加载程序来处理此文件类型

2 个答案:

解决方案