babel-browser 6.1.4 throws TypeError

[JLHwung]

The test code is just the example of babeljs.io

<script src="node_modules/babel-browser/browser.js"></script>
<script type="text/babel">
class Test {
  test() {
    return "test";
  }
}

var test = new Test;
test.test(); // "test"
</script>

it will throw error in the console Uncaught TypeError: Cannot read property 'keys' of undefined @ browser.js:19839

Seems like _dereq_(290) returns {version: '1.2.6'}, is that related to browserify or any unresolved module?

[zertosh]

When I run a locally built version of babel-browser, it works[1]. When I diff the npm version against my locally built one, they're very different. I haven't looked at the packaging scripts, but I wouldn't be surprised if the issue is that babel-browser is getting packaged before one of its deps. babel-browser must be the last thing packaged since it depends on everything else.

[1] I say it "works" because it doesn't throw an error. It doesn't do anything because it still needs presets/plugins. I'm thinking that a babel-browser package doesn't make sense.

[sebmck]

@zertosh

babel-browser must be the last thing packaged since it depends on everything else.

It is.

I'm thinking that a babel-browser package doesn't make sense.

It doesn't at all but apparently people want it.

[hon2a]

I'm thinking that a babel-browser package doesn't make sense.

It doesn't at all but apparently people want it.

Selecting a right tool depends on the job... I'll give you an example of why I find the package useful. I'm making a library of simple ReactJS components + styles (core lib for multiple projects). Beside the sources, I also have a set of "demos" - HTML pages showing the components and describing how to use them. This helps the designers quickly validate their designs and changes. They can even go in and tweak the demo sources to play with them. The sources look like this:

Some text using `markdown`...

<script type="text/jsx" class="demo">
  <MyComponent some={props} />
</script>

And some more text...

and I have a small tool that uses highlight.js and babel-browser to render the example right there on the page, along with highlighted source code.

Now, of course I could have the examples in separate files and transpile them during build. But inlining them makes using them much easier for the intended audience ... and the impact of transpiling at runtime is negligible.

---

So, until this is fixed, I have to stick with Babel 5.

[sebmck]

Babel 6 is modular and doesn't include any transforms in core so you'll still need to package all your plugins yourself.

[hon2a]

Thanks for the pointer, I didn't realize the full impact of that for the runtime use. I'll try that when I have time.

[smussell]

It seems there is an obvious use case: https://babeljs.io/repl/, what is the plan for making that work? I have a similar use case to the one mentioned above, I use babel in the browser for interactive examples, so I'm curious how the babel repl will be updated to work with babel 6 because assuming that is updated, then there should be no problem for anyone else that want to use babel in the browser.

[torgeir]

I'm also seeing the issue above Uncaught TypeError: Cannot read property 'keys' of undefined ..., however building it myself renders no errors.

We have been using babel5 in the browser for an es6/react playground for use in workshops and the like. Spent some time trying to make it work with babel6 and presets react and es2015 w/webpack yesterday, but wasnt really successful..

[babel-bot]

Comment originally made by Oto Inša (otoinsa) on 2016-01-07T12:28:27.000Z

I'm getting this error too, until it's fixed I'll stick to babel 5 sadly...

It's very handy to compile in-browser when using multiple development machines. I try to keep my environments to minimum, since I have to maintain them across ~5 machines - it gets really messy.

How come such a huge feature is no longer available?

---

Comment originally made by @EvNaverniouk on 2016-01-07T15:21:16.000Z

Also getting the "Cannot read property 'keys' of undefined" error from Object.keys() when loading babel-browser 6.1.19. Similarly to the others, I too need this for a repl-like system where users can interactively play with code on the page.\

EDIT: I have worked around this by looking at how the new Babel 6 REPL tool does it (ie. via importing 'babel' into the code itself). That fixed my issue.

[hzoo]

You can use http://babeljs.io/docs/usage/browser/ babel-standalone for this now - https://github.com/Daniel15/babel-standalone

or stick with babel-browser but on babel 5.

[EvHaus]

Just wanted to follow up on this issue in case anyone encounters the same issue.

As, babel-bot posted -- the babel-standalone module was exactly what I needed for my REPL tool. Highly recommend that everyone migrates to that.

[xgqfrms-GitHub]

babel-standalone