Create React App - Unexpected token import in config.js

Hi, after running getstorybook in my create react app and running storybook I get: config.js?1daa:1 Uncaught SyntaxError: Unexpected token import In the console when loading http://localhost:9009/ and no stories loaded.

Didn’t tinker or anything (just plain CRA, though not an empty project) Sorry if that’s not enough information, will happily provide more if needed.

package.json: { "name": "grumshi", "version": "0.1.0", "private": true, "devDependencies": { "chai": "^3.5.0", "enzyme": "^2.4.1", "react-addons-test-utils": "^15.3.2", "react-dom": "^15.3.1", "react-scripts": "0.4.1", "react-test-renderer": "^15.3.2", "@kadira/storybook": "^2.21.0" }, "dependencies": { "react": "15.3.1", "react-dom": "^15.3.1", "react-helmet": "^3.1.0", "react-redux": "^4.4.5", "react-router": "^2.7.0", "react-router-redux": "^4.0.5", "react-traverse": "0.0.3", "redux": "^3.6.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "storybook": "start-storybook -p 9009", "build-storybook": "build-storybook" }, "eslintConfig": { "extends": "./node_modules/react-scripts/config/eslint.js" } }

On the console I get this probably related error that goes away if I remove the JSX from the default stories: ERROR in C:/Users/Guy/Documents/Projects/grumshi/src/stories/index.js Module parse failed: C:\Users\Guy\Documents\Projects\grumshi\src\stories\index.js Unexpected token (7:4) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (7:4) at Parser.pp$4.raise (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseParenAndDistinguishExpression (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:1861: 32) at Parser.pp$3.parseExprAtom (C:\Users\Guy\Documents\Projects\grumshi\node_modules\webpack\node_modules\acorn\dist\acorn.js:1796:19) @ C:/Users/Guy/Documents/Projects/grumshi/.storybook/config.js 4:2-27

[xiankai]

Removing the {"modules":false} flag from my es2015 preset helped in my case.

[usulpro]

size matters!!!

https://www.youtube.com/watch?v=tSd4hUOcalg

tl;dr: You need to have Uppercase drive letter in your current folder path 😱😡😮

so to solve this you need to change drive letter to Uppercase you need to do it through root folder not whole path:

rem doesn't work:
cd E:\your\path_to\project
npm run storybook

rem works:
cd E:\
cd your\path_to\project
npm run storybook

rem works:
cd E:\your\path_to\project
c:
e:
npm run storybook

It looks like in some cases when you open your cmd shell it could be open with lowcase drive letter. in my case when I open it from total commander prompt. I hope now it will be easy to prevent, just need to pay attention to the register of a drive letter.

PS sorry for so emotional. been hunting for this ugly bug for over two months. had to rebuild the workflow in the end.