for files outside src directory. Error : You may n

Question

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

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

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

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

Answer 1

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]

• [Folder] Components
  • header
    • header.js
    • header.css
  • login.js
• [Folder] Containers
• [Folder] Reducers
• [Folder] Actions
• routes.js * alternatively this can be a folder *
• store.js
• app.js

Ofcourse this is only an example.