javascript - ReactJS 错误你可能需要一个合适的加载器来处理这个文件类型

Question

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

我正在尝试加载 Nav.js、Hero.js 和 About.js 等 js 组件并将它们导入 index.js。

我的 Github repo :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 之外。

解决方案

将 components 目录移动到 src 并像这样引用 index.js 中的文件

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

注意我还修改了 soundcloud 目录的路径。您无需先返回目录再返回以引用它。

此外，如果您在进行此修复时正在运行您的服务器(yarn start 或 npm start)，您应该停止它并重新启动它，否则您会得到一个找不到模块错误。