Storybook: babelHelpers is not defined using Rollup [Solved]

Created on 19 Jun 2017  ·  11Comments  ·  Source: storybookjs/storybook

Hello there, I created a React component library using Rollup/styled components and when I try to run story book I got this error:

screen shot 2017-06-19 at 1 43 30 pm

babelHelpers is not defined
ReferenceError: babelHelpers is not defined
    at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:41768:58)
    at Object.defineProperty.value (http://localhost:9001/static/preview.bundle.js:42381:30)
    at __webpack_require__ (http://localhost:9001/static/preview.bundle.js:660:30)
    at fn (http://localhost:9001/static/preview.bundle.js:86:20)
    at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:42395:70)
    at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:42414:30)
    at __webpack_require__ (http://localhost:9001/static/preview.bundle.js:660:30)
    at fn (http://localhost:9001/static/preview.bundle.js:86:20)
    at loadStories (http://localhost:9001/static/preview.bundle.js:40294:2)
    at ConfigApi._renderMain (http://localhost:9001/static/preview.bundle.js:40760:20

I'm using master branch https://github.com/react-medellin/components/tree/master for this and regular global installation for story book.

Any ideas why is this happening?

Thanks!!!

question / support

Most helpful comment

@alejandronanez, you can remove external-helpers from your .babelrc file and enable it back only on your rollup.config.js using the rollup-plugin-babel

import babel from 'rollup-plugin-babel';
export default {
  // ...
  plugins: [
    babel({
      exclude: 'node_modules/**',
      plugins: ['external-helpers']
    }),
  ]
}

All 11 comments

@alejandronanez can you give more info about how you did the install, or better yet share a repo?

Hello @shilman,
You can check what I've done in here: https://github.com/react-medellin/components/tree/storybook if you have time you can yarn && yarn storybook and then open localhost:9001

I played around with it and it works if I remove "external-helpers" from the .babelrc. Hope that helps! Closing for now.

Hmmm external-helpers is needed by my library (I'm using rollup) will dig into it and see what's going on! If I find a good solution I'll post it here in case anyone has a similar problem.
Thanks @shilman !

Good luck! Let us know how it works out!

@alejandronanez, you can remove external-helpers from your .babelrc file and enable it back only on your rollup.config.js using the rollup-plugin-babel

import babel from 'rollup-plugin-babel';
export default {
  // ...
  plugins: [
    babel({
      exclude: 'node_modules/**',
      plugins: ['external-helpers']
    }),
  ]
}

Hey Esteban! Will try that! Thanks!!!!
On Fri, Jun 23, 2017 at 4:29 PM Esteban Martini notifications@github.com
wrote:

@alejandronanez https://github.com/alejandronanez, you can remove
external-helpers from your .babelrc file and enable it back only on your
rollup.config.js using the rollup-plugin-babel
https://github.com/rollup/rollup-plugin-babel

import babel from 'rollup-plugin-babel';export default {
// ...
plugins: [
babel({
exclude: 'node_modules/**',
plugins: ['external-helpers']
}),
]
}


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/storybooks/storybook/issues/1320#issuecomment-310777396,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAcYUgchrgycLTXdu_Pxv9TBr7R4SxMZks5sHC47gaJpZM4N-odN
.

Just tried this, worked like charm! Thanks!

Isn't the working configuration missing...

import babel from 'rollup-plugin-babel';
export default {
  // ...
  plugins: [
    babel({
      exclude: 'node_modules/**',
      plugins: ['external-helpers'],
      externalHelpers: true,  // ...this field ???
    }),
  ]
}

@Tomekmularczyk
No externalHelpers it is not supported

from the readme

All options are as per the Babel documentation, except the following:
options.externalHelpers: a boolean value indicating whether to bundle in the Babel helpers

For future googlers -Setting format to ES module in _rollup.config.js_ was the fix for me: output.format: 'es'

Rollup docs:

an ES module bundle, suitable for use in other people's libraries and applications, that imports the external dependency.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

wahengchang picture wahengchang  ·  3Comments

tirli picture tirli  ·  3Comments

Jonovono picture Jonovono  ·  3Comments

rpersaud picture rpersaud  ·  3Comments

miljan-aleksic picture miljan-aleksic  ·  3Comments