Storybook: babelHelpers is not defined using Rollup [Solved]

[alejandronanez]

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

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!!!

[shilman]

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

[alejandronanez]

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

[shilman]

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

[alejandronanez]

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 !

[shilman]

Good luck! Let us know how it works out!

[emartini]

@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']
    }),
  ]
}

[alejandronanez]

Hey Esteban! Will try that! Thanks!!!!
On Fri, Jun 23, 2017 at 4:29 PM Esteban Martini [e-mail]
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
.

[alejandronanez]

Just tried this, worked like charm! Thanks!

[Tomekmularczyk]

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 ???
    }),
  ]
}

[wilomgfx]

@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

[MrJadaml]

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.