Babel polyfill: Run ES6 code from ajax

Question

I'm trying to set up a page which loads HTML pages with ajax, and sets the contents of an element on the host page to the HTML pulled from the server. The HTML may contain script tags.

This works fine for regular script elements (ES5, or "text/javascript"), but when I set the type to "text/babel", the code does not run.

If I visit this page directly (i.e. no ajaxing takes place), the "text/babel" code runs just fine. Is there something preventing Babel from becoming aware of these script elements?

Neither do regular script tags run when they are created by setting innerHTML. — Tamas Hegedus, Aug 07 '16 at 19:37
Maybe you use a framework which executes script tags on the ajaxed dom? — Tamas Hegedus, Aug 07 '16 at 19:39
Maybe. I'm using jquery's `.load()` method for loading the new pages. I will look into that more. — , Aug 07 '16 at 19:40
Yeah I just looked at the docs for `.load()`, and yeah, it seems that it's running the scripts for me. I did not know that's how it worked. Thanks. — , Aug 07 '16 at 19:43
Also, even if it *did* run ES6 scripts locally, which would mean you've configured your browser to do so, it wouldn't on most machines. If this is intended for general consumption, you should be transpiling. — Dave Newton, Aug 07 '16 at 19:50
@DaveNewton It's not meant for general consumption, but it does need to work on a few machines. What configuration is necessary? I was hoping it would just run on these computers with no additional configuration. — , Aug 07 '16 at 19:52
@Hassan Does it need to run on non-Chrome browsers? IIRC Chrome has supported ES6 (ES7?) since v52, but that's just Chrome. I didn't even know `text/babel` was something general browsers understood. — Dave Newton, Aug 07 '16 at 19:57
To run "text/babel" he had to use some really old package which transpiled the code on the fly. There is no such package for years now. — Tamas Hegedus, Aug 07 '16 at 19:57
Or, he did not, just browsers ignored the unknown type tag and ran it as regular javascript, and only supported es6 features were used so.. — Tamas Hegedus, Aug 07 '16 at 19:58
I'm using something called "[babel-standalone](https://github.com/Daniel15/babel-standalone)". — , Aug 07 '16 at 19:59

score 1 · Answer 1 · answered Aug 07 '16 at 19:55

By default, script tags do not run when created by setting an element's innerHTML. jQuery-s load function does it for you, it traverses the dom and executes newly created script tags (by using eval). babel-browser is not integrated with jQuery's load. So that's why it does not work.

Solution: Do not use babel-browser, browser-transforms or babel-browser-transform. These are either not maintained for yerars or are even removed. Use rollupjs or webpack to pre-compile and bundle your sources, even for development.

EDIT

If you only use es6 features supported by all your target browsers, you dont need to transpile at all. Just use type="text/javascript", or even better, bare <script> tags.

score 1 · Answer 2 · answered Dec 27 '17 at 08:22

This is exactly the issue I run into when I try to use react component in a old jquery website.

I tried two ways to make it work: 1. Use webpack to compile the component, my webpack.config.js is something like:

 var HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
 entry: {
     main: [
         'es6-shim',
         'promise-polyfill',
         'whatwg-fetch',
         './form_component.js' // Path to your app's entry file
     ]
 },
 output: {
     path: __dirname,
     filename: "bundle.js"
 },
 module: {
     rules: [
         {
             test: /\.js$/,
             use: {
                 loader: 'babel-loader',
                 options: {
                     presets: [
                         ['es2015', {
                             loose: true,
                             modules: false
                         }],
                         'react'
                     ]
                 }
             }
         }
     ]
 },
 plugins: [new HtmlWebpackPlugin()]
 };

It works but the bundle.js is about 880 KB, which is too large just for a form component.

As the issue is due to babel script is not executed in jquery's globalEval function, I tried to pre-compile it with babel, and use the precompiled js, it also works and the precompiled js is about the same size as the original js file.:

babel form_component.js --presets react,es2015 > precompiled.js

Babel polyfill: Run ES6 code from ajax

2 Answers2