.babelrc ignored in Storybook HTML?

[Granze]

I'm trying out Storybook HTML with hyperHTML-Element. To make sure Babel will be able to transpile Custom Elements correctly I need to load a couple of plugins. I've added a .babelrc file in the root (I tried the .strorybook folder as well) but it seems to be ignored.

Here the versions of my devDependencies:

"devDependencies": {
    "@storybook/html": "^4.0.0-alpha.14",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-builtin-classes": "^0.6.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-runtime": "^6.26.0"
  }

[igor-dv]

Do you have a reproduction repo?

[Granze]

Here we go: https://github.com/Granze/test-storybook

[igor-dv]

I am seeing this: Super expression must either be null or a function, not object error when running storybook.

That is because of this line:

const HyperHTMLElement = require('hyperhtml-element');

It should be

const HyperHTMLElement = require('hyperhtml-element').default;

or

import HyperHTMLElement from 'hyperhtml-element'

After that I am getting this error: Class constructor HyperHTMLElement cannot be invoked without 'new'

Which is already IMO related to how this framewrok should be rendered

[Granze]

First of all, thanks for pointing me out the import problem!

The element itself works just fine without any transpilation as you can see in this codepen.

The latest problem should be fixed using the following .babelrc

{
  "plugins": [
    "babel-plugin-transform-es2015-classes",
    ["babel-plugin-transform-builtin-classes", {
      "globals": ["Array", "Error", "HTMLElement"],
      "logIfPatched": true
    }]
  ]
}

...but it seems to be ignored.

[igor-dv]

After removing babel-plugin-transform-es2015-classes your example worked for me (in chrome).

[Granze]

oh, you are right. :) Thanks for helping me!