create-react-app

[shilman]

Issue by lifeiscontent
Friday Dec 30, 2016 at 10:33 GMT
Originally opened as storybook-eol/storyshots#71

---

When using a default create-react-app for storyshots, it seems to break.

I've got this code in src/Storyshots.test.js

import initStoryshots from 'storyshots';
initStoryshots();

the error in the test is

Test suite failed to run

    evalmachine.<anonymous>:1
    (function (exports, require, module, __filename, __dirname) { import { configure } from '@kadira/storybook';
                                                                  ^^^^^^
    SyntaxError: Unexpected token import

[shilman]

Comment by lifeiscontent
Friday Dec 30, 2016 at 10:40 GMT

---

figured it out, I needed a .babelrc that reflected the same presets as create react app

[shilman]

Comment by roonyh
Friday Dec 30, 2016 at 11:16 GMT

---

Glad it works! storyshots comes pre transpiled. So I think this is unrelated to storyshots. Anyway reopen if needed.

[shilman]

Comment by kedoska
Thursday Jan 12, 2017 at 20:38 GMT

---

I have the same issue.
@lifeiscontent where did you set up the .babelrc?

in my __tests__ directory i have one file, storyshots.js

import initStoryshots from 'storyshots'
initStoryshots({
  suit: 'ComponentStories'
})

when i run npm run test-storybook everything works just fine
but, when i run npm test or, in my case CI=true npm test it fails like this

my project was created with create-react-app

[shilman]

Comment by Fatxx
Thursday Feb 02, 2017 at 01:27 GMT

---

Any solution here? Get in the same error

[shilman]

Comment by Fatxx
Thursday Feb 02, 2017 at 13:01 GMT

---

Could this issue be related to the command react-scripts test --env=jsdom ? Which we use to run tests?

[shilman]

Comment by marc-rutkowski
Thursday Feb 02, 2017 at 14:35 GMT

---

@kedoska, @Fatxx, as mentioned by @lifeiscontent, providing a basic .babelrc file (containing the following snippet) into the project root folder, solves the problem.

{
  "presets": ["es2015", "react"]
}

Let us know if it works for you.

[shilman]

Comment by irnc
Tuesday Mar 14, 2017 at 21:15 GMT

---

Please have a look at storybook-eol/storyshots#67 (review) which added code related to babel config. The root cause for that issue seems to be in usage of babelConfig variable before its declaration.

[shilman]

Comment by baptistemanson
Friday Mar 17, 2017 at 01:07 GMT

---

We were not able to get storyshots working at the same time as storybook and create-react-app using the workaround.
:(.

[shilman]

Comment by irnc
Saturday Mar 18, 2017 at 19:02 GMT

---

@baptistemanson For a workaround, you could move from ES6 to ES5 in .storybook/config.js, i.e. use requite instead of import, so unconfigured Babel would just pass without an error on unknown syntax.

Note, that original error is about unknown syntax in .storybook/config.js, not in Storyshots.test.js.

[ndelangen]

We currently do not support ES modules in our config files. maybe in the future we will.