ReactJS错误:您可能需要一个适当的加载器来处理此文件类型。

4
我正在使用Facebook的创建React应用来构建我的第一个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>
    );
  }
}

你能详细说明一下你是如何打包React文件的吗?你使用webpack吗?你的webpack文件是什么样子的? - Joseph Rex
这是某种教程吗?请给我链接。问题可能出在webpack上。 - Sergey Orlov
你能运行 node -v 并给我终端的输出吗?谢谢。 - Abdennour TOUMI
@bl4ckdu5t,我已经发布了更新。 - user7904085
@AbdennourTOUMI 节点 v7.7.1 - user7904085
3个回答

1

只需将组件目录移动到 src 目录中即可解决问题。这很奇怪,因为在 webpack 设置中不应该发生这种情况,但它是 create-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 startnpm start),则应停止并重新启动它,否则您将收到“找不到模块”的错误提示。

0
你的项目中组件文件夹放错位置了。将你的组件文件夹移动到 src 文件夹内,并将路径从 '../components/Nav' 改为 './components/Nav'(从 ../ 改为 ./)。

当我删除一个点时,它会显示“找不到模块:./components/Nav”。 - user7904085
还要将您的组件文件夹移动到 src 文件夹中。 - Sergey Orlov

0

我的解决方案:

  • 将 app.js 更改为 app.jsx
  • 测试:/.(js|jsx)$/
  • "@babel/plugin-proposal-class-properties"

你的回答可以通过添加额外的支持信息来改善。请 [编辑] 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是否正确。您可以在 帮助中心 中找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接