Here's my index file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="test">
<title>test</title>
</head>
<body>
<!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="/app.js" type='text/babel'></script>
<script type="text/javascript">
fnc();
</script>
</body>
</html>
And here's app.js file
function fnc() {
console.log('myname');
}
I wonder why console says:
Uncaught ReferenceError: fnc is not defined
at (index):19
(anonymous) @ (index):19
If I change script type with text/javascript, it works without problem. However, I need it to be babel script for tensorflow script to work in IE11.
Can anybody help me out?
In addition to @CertainPerformance's answer,
If you want to call the function fnc() directly, Then the type should be text/babel, Because it is defined in babel and transpiled. If you use text/javascript it will search for it in window object.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="/app.js" type='text/babel'></script>
<script type="text/babel"> //<-- not text/javascript
fnc(); // works fine
</script>
What Babel does is it transpiles code in modern syntax into older syntax. This can be an intensive process - so, it doesn't transpile script tags immediately, it'll transpile them asynchronously. The app.js has not been transpiled by Babel at the point that the inline script tag runs.
While you could add a delay or add some way to detect when the transpiled script actually runs, a better way to deal with something like this would be to put all the code into the script that gets transpiled, so you don't get race conditions like these.
An even better approach would be to transpile the script in advance, and host and load that script on your page. Babel Standalone is not a good idea to use in production, because it can be quite heavyweight - better to put the processing effort on your server, once, when transpiling, than on every client every time they load the page.
Then you could have something like
<script src="/transpiledApp.js"></script>
<script type="text/javascript">
fnc();
</script>
and it would just work.