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

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

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 20 (9 by maintainers)

Commits related to this issue

Resolve app paths from realpath of CWD, fix #637 — committed to motiz88/create-react-app by motiz88 8 years ago
Resolve app paths from realpath of CWD, fix #637 (#648) * Resolve app paths from realpath of CWD, fix #637 * Use new resolveApp() for NODE_PATH too — committed to feiqitian/create-react-app by motiz88 8 years ago

Most upvoted comments

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.

+16

jturbo26 on Jan 26, 2017

@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.

leshow on Feb 27, 2017

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.

guivho on Sep 14, 2016

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

Inconspicuously on May 17, 2017

@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.

gaearon on Feb 27, 2017