用于src目录之外的文件.错误:您可能需要适当的加载程序来处理此文件类型.

问题描述

我是新来的反应者，我遵循此步骤在机器上设置了反应环境.

I am new to react and I followed this to setup the react environment on my machine.

npm install -g create-react-app
create-react-app myapp
cd myapp
npm start

因此，这完全可以正常运行，并且应用程序可以完美启动.我在创建的src文件中创建了一些测试组件，它也可以正常工作.但是，当我在src文件外部创建目录并在其中添加我的.js文件(其中包含我的组件在src内部运行良好)的那一刻，就会收到此错误.

So this works completely fine and the app starts perfectly. I created a few test components inside the src file that is created and it works fine too.But the moment I create a directory outside the src file and add my .js files there in which I have my components which were working fine inside src, I get this error.

Failed to compile.

Error in ./components/test.js
Module parse failed: /Users/foo/test/myapp/components/login.js Unexpected token (22:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (22:6)
 @ ./src/index.js 15:13-43

这些组件位于test.js内部，该目录位于组件目录中.这是目录结构.

The components are inside test.js which is inside component directory. Here is the directory structure.

README.md
components/
    test.js

node_modules
package.json
public/
    index.html
src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    login.js
    logo.svg

根元素位于index.html中，而index.js使用test.js的组件呈现DOM

The root element is inside index.html and index.js renders the DOM with components of test.js

推荐答案

您的脚本应始终遵循Webpack的约定，其中所有脚本文件均位于"src"目录中.您不希望偏离此文件夹结构，因为您的项目目录应如下所示:

Your scripts should always follow the convention of Webpack where all your script files are placed within the 'src' directory. You wouldn't want to stray away from this folder structure as your project directory should look like:

[SRC]

• [文件夹]组件
  • 标题
    • header.js
    • header.css
    • [Folder] Components
      • header
        • header.js
        • header.css

        当然，这只是一个例子.

        Ofcourse this is only an example.

        这篇关于用于src目录之外的文件.错误:您可能需要适当的加载程序来处理此文件类型.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！