Create-react-app: Unexpected token (7:2) You may need an appropriate loader to handle this file type.

[guivho]

Ran create-react-app react-my-create-react-app-created
followed by npm start
with this error result:

Error in d:/src/react-my-create-react-app-created/src/index.js
Module parse failed: d:\src\react-my-create-react-app-created\src\index.js Unexpected token (7:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:2)

and here's the devtools console output:

[HMR] Waiting for update signal from WDS...
webpack:///multi_main?:4 Uncaught Error: Cannot find module "c:\Users\guivh\src\react-my-create-react-app-created\src\index"
client:23 [WDS] Hot Module Replacement enabled.
client:46 [WDS] Errors while compiling.
client:48 d:/src/react-my-create-react-app-created/src/index.js
Module parse failed: d:\src\react-my-create-react-app-created\src\index.js Unexpected token (7:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:2)
    at Parser.pp$4.raise (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExprList (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:2165:22)
    at Parser.pp$3.parseSubscripts (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1741:35)
    at Parser.pp$3.parseExprSubscripts (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1718:17)
    at Parser.pp$3.parseMaybeUnary (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (D:\src\react-my-create-react-app-created\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1573:21)
 @ multi main

npm version is 3.10.4
node version ia v6.3.1

Please advise

[gaearon]

SyntaxError: Unexpected token (7:2) means there is a syntax error on line 7, column 2 in d:\src\react-my-create-react-app-created\src\index.js. Can you please show this file? Have you modified it in any way?

It would be great if you could share the project reproducing the issue.

[guivho]

It is the file as created by the tool.

It's content is:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

I attach a zip file of the project:
react-my-create-react-app-created.zip

Guido

[motiz88]

Seeing this too on a similar setup:

• Windows
• npm 3.10.6
• Node 6.2.0
• create-react-app 0.3.0

All I did was create the app and run npm start.

[motiz88]

Did some digging. In my case it's a symlink issue. If cwd is a symlink, babel-loader skips all the .js files. If I cd to the project's real path and npm start from there - it works.

[motiz88]

Will try to dive in and work on a PR.

[guivho]

I trashed the node_modules directory, ran npm install followed by npm start and it worked: no longer any problem.

I then ran
npm remove -g create-react-app
npm install -g create-react-app
create-react-app test-react-app
cd test-react-app
npm start
and this worked without problems.

So, as far as I am concerned, this issue is solved.

FWIW, I'm running on windows, so my problem may not have been caused by a symlink, I don'y know.

[hmaurer]

I am still getting a "You may need an appropriate loader to handle this file type." with a symlink'ed folder in src/. Was this supposedly fixed by https://github.com/facebookincubator/create-react-app/commit/07105bfd877cd56d4ab0b1a669199f877c8c9174? (on OS X).

[hmaurer]

Nevermind, my issue seems to be in the lines of https://github.com/webpack/webpack/issues/2937

[gaearon]

It was fixed but not released. You can see the issue is tagged with a milestone. When the related milestone is released, you will see it on the GitHub Releases page and in the CHANGELOG.MD.

[gaearon]

This should be fixed in 0.4.2.
Please verify!

[hmaurer]

@gaearon My comment was based on master, but either way I think my problem is (somewhat) unrelated. I wanted to symlink a "shared" library in my project but ran into some issues with babel and npm using the symlink'ed folder absolute path and not the path where the symlink is (so loaders did not process the files in the shared folder, and npm module resolution was happening in the shared folder hierarchy). Not a problem with react-create-app; sorry for the confusion!

[jturbo26]

I had this error and it was because I created my components folder outside the src folder. Once I moved it inside src everything worked fine.

I just wanted to drop my amateur mistake and solution here just in case someone comes across it in the future.

[leshow]

@jturbo26 What if you are importing a component that lives in a separate dir outside of src? Say in the case when you have more than one app sharing a component? I'm running into this error and there is no real solution, I don't want to bring the component into src because it's supposed to exist separately.

[gaearon]

@leshow It’s just not supported right now, sorry. There are a dozen issues about this, and we intend to solve it in some way in the future, but for now we don’t have a good solution for sharing components between several apps locally with CRA.

[leshow]

Is there a recommended path to get it working if you eject? I was able to
yarn link a local package and add it's directory in babel-loader, but I'm
not sure if there's an easier way.

On 27 Feb 2017 3:21 pm, "Dan Abramov" [e-mail] wrote:

@leshow https://github.com/leshow It’s just not supported right now,
sorry. There are a dozen issues about this, and we intend to solve it in
some way in the future, but for now we don’t have a good solution for
sharing components between several apps locally with CRA.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebookincubator/create-react-app/issues/637#issuecomment-282841170,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABE3bpMx2d21TdO7_pb6qxqsm2oKXEXAks5rgzBMgaJpZM4J7jeJ
.

[gaearon]

You can change the include setting in Webpack configs to anything you'd like. Unfortunately I don't have a particular solution: usually we figure them out when we integrate them in CRA itself. 😉

[Inconspicuously]

Believe it or not, my issue was the commented code at the end of the file:

/*
import { Http } from '@angular/http';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {}
*/

Removing it, or fully commenting it like so:

//
//import { Http } from '@angular/http';

//@Component({
//  selector: 'page-login',
//  templateUrl: 'login.html'
//})
//export class LoginPage {}
//

..fixes the issue

[unutoiul]

I'm trying to import a react component button.js file from node_modules which is a component made by me to be shared between projects and I get You may need an appropriate loader to handle this file type. using create-react-app..

any ideas?

[xvasko]

My amateur issue -> somehow WebStorm acted like it created a JS file, but in reality, when checked inside explorer, the file was not JS...

[gaearon]

This is an old issue that was fixed. Adding comments here is like shouting in the void :-)

If you experience a problem with the same symptom (but a different cause) please file a new issue, describe it in detail and provide a reproducing case.