Storybook: Create React App - Unexpected token import in config.js

[guy-kdm]

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

[arunoda]

It's pretty great, If I can get a sample repo.
And tell me the NPM version you are using.

[guy-kdm]

Sure, I'll do that in a little while (npm 3.10.3, node 6.3.0)

[UsulPro]

I have same error both in react-cdk and pure Storybook

ERROR in E:/DevelopWeb/_CompFactory/_Develop/tmp/react-wizard/src/stories/index.js
Module parse failed: E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\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 (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:1715:21)

    at Parser.pp$3.parseMaybeUnary (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (E:\DevelopWeb\_CompFactory\_Develop\tmp\react-wizard\node_modules\acorn\dist\acorn.js:1796:19)
 @ E:/DevelopWeb/_CompFactory/_Develop/tmp/react-wizard/.storybook/config.js 9:2-27

I guess that this is a problem because of windows @guy-kdm do work under windows?
Unexpected token (7:4) in react-wizard/src/stories/index.js it's just place where jsx code goes:

it starts after strorybook v2 was released

as a temporary solution I run it from mintty shell or ...(It looks like magic to me) from Brackets Node.JS plugin (I can only assume that the matter in internal node v0.10, while I use v6.3.1)

[filmic]

I had a similar issue with SyntaxError: Unexpected token import and solved it by adding "es2015" preset to my .babelrc file in the app root folder.

Using transform-es2015-modules-commonjs plugin instead of entire preset should also work.

[arunoda]

@guy-kdm @filmic Do you guys have any .babelrc file in your project root?
If so, you may need to remove it.

Here I'd to see a sample repo (or how to reproduce this).

[guy-kdm]

No babelrc (cause CRA), if no one will before I'll upload a sample repo on Saturday, thanks for the help meantime

[guy-kdm]

@UsulPro Yep, windows unfortunately :)

[filmic]

@arunoda Rather than removing the .babelrc in root folder (which is used for the app production build) I would create a custom .babelrc just for Storybook as described in docs: https://getstorybook.io/docs/configurations/custom-babel-config

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

[cgood92]

I am also having this problem.

// .storybook/.babelrc

{
  "presets": [
        ["es2015", {"modules": false, "loose": true}],
        "stage-3",
        "stage-2",
        "react",
    ],
    "plugins": [
        "transform-class-properties",
        "styled-jsx/babel",
        ["transform-react-jsx", { "pragma": "h"}]
    ]
}

const { configure } = require('@kadira/storybook')

const req = require.context('../src/components', true, /story.js$/)

function loadStories() {
    req.keys().forEach(filename => console.log(filename) || req(filename))
}

configure(loadStories, module)

console messages:

./HeaderNav/story.js
render.js:65 SyntaxError: Unexpected token import
    at Object.<anonymous> (http://localhost:6006/static/preview.bundle.js:3149:2)
    at __webpack_require__ (http://localhost:6006/static/preview.bundle.js:556:30)
    at fn (http://localhost:6006/static/preview.bundle.js:87:20)
    at webpackContext (webpack:///./src/components_story.js$?:5:9)
    at eval (webpack:///./.storybook/config.js?:8:35)
    at Array.forEach (native)
    at loadStories (webpack:///./.storybook/config.js?:7:13)
    at ConfigApi._renderMain (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:40:20)
    at render (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:66:17)
    at ConfigApi.configure (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:91:9)
renderException @ render.js:65
renderPreview @ render.js:137
renderUI @ index.js:89
dispatch @ createStore.js:186
_renderError @ config_api.js:57
render @ config_api.js:76
configure @ config_api.js:91
(anonymous) @ config.js:12
(anonymous) @ config.js:13
(anonymous) @ preview.bundle.js:3143
__webpack_require__ @ preview.bundle.js:556
fn @ preview.bundle.js:87
(anonymous) @ multi_preview:4
(anonymous) @ preview.bundle.js:586
__webpack_require__ @ preview.bundle.js:556
(anonymous) @ preview.bundle.js:579
(anonymous) @ preview.bundle.js:582
client.js:67 [HMR] connected

Node version: v6.9.1

Any ideas @arunoda ?

[kennetvu]

@cgood92 you can try to add BABEL_ENV=commonjs before you run storybook.

e.g:
BABEL_ENV=commonjs start-storybook -p 9001 -c .storybook

it worked for me, I had the same problem as you.

[pencilcheck]

Adding BABEL_ENV doesn't work for me, here is my .babelrc

{
  "presets": [
    "next/babel",
    "stage-0"
  ],
  "plugins": [
    ["transform-define", "./env-config.js"],
    "transform-export-extensions",
    "transform-decorators-legacy",
    [
      "module-resolver",
      {
        "root": ["."],
        "alias": {
          "styles": "./styles"
        },
        "cwd": "babelrc"
      }
    ],
    [
      "wrap-in-js",
      {
        "extensions": ["css$", "scss$"]
      }
    ]
  ]
}

[xiankai]

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

[ndelangen]

That would make sense, since currently that'd require webpack 2.

Luckily webpack 2 support is coming!