Menu
Before i start the question, here is what i already know to avoid answers along the same lines.
TL;DR: I already know I can use a webserver and serve the index.html as http://localhost:8081/index.html and it will work.
Now for the question details:
I have created a minimal react-js app, referencing babel-standalone in the index.html file as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minimal</title>
</head>
<body>
<div id='divRootComponent'></div>
<!-- react reasonably latest for oct/2018 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<!-- babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- react CUSTOM component.. i.e. myApp's entry point -->
<script type="text/babel" src="index.js"></script>
</body>
</html>
and the index.js contents are:
class YoSupComponent extends React.Component {
constructor () {
super();
this.state = {
message: 'whatever...'
};
}
componentDidMount() {
console.log('YoSupComponent.componentDidMount');
}
render () {
return (
<div>
Yo ! Dude or Dudette... sup ?
</div>
);
}
}
const props = {}; //none for now...
ReactDOM.render(<YoSupComponent {...props} />
, document.getElementById('divRootComponent'))
When I tried to access the index.html file in the Browser via file:///path/to/index.html, the error is:
Access to XMLHttpRequest at 'file:///D:/path/to/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. @ babel.min.js:24
So thinking the problem is related to the script tags referencing files remotely, I download react and babel locally, and make references local; then again I access file:///path/to/index.html.
Still get the same error ! whats going on? a) why does babel even use XMLHttpRequest (as per the error message) when the babel.js file is now local ? b) why no such message for react files ?
847
Babel, or the Necessity of Violence: an Arcane History of Oxford Translators' Revolution is Kuang's newest novel. And unlike The Poppy War Trilogy, which I consider a grimdark fantasy series, Babel is a standalone dark academia novel.
You can use babel-standalone to transpile ES6 to ES5 in a browser environment. You just need to load the “babel-standalone” in your script as highlighted below and write the script you want to transpile, in script tag with type “text/babel” or “text/jsx”. Babel will automatically compile and execute the script.
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx: <div id="output"></div> <!--
Loading external scripts via src attribute is supported too: You can also set the async attribute for external scripts. Load babel.js or babel.min.js in your environment. This will expose Babel's API in a Babel object:
However, there are some valid use cases for @babel/standalone: It provides an easy, convenient way to prototype with Babel. Using @babel/standalone, you can get started using Babel with just a simple script tag in your HTML. Sites that compile user-provided JavaScript in real-time, like JSFiddle, JS Bin, the REPL on the Babel site, JSitor, etc.
Using @babel/standalone, you can get started using Babel with just a simple script tag in your HTML. Sites that compile user-provided JavaScript in real-time, like JSFiddle, JS Bin, the REPL on the Babel site, JSitor, etc.
According to MDN, if you specify a script tag with a type that's not text/javascript, it will be ignored by the browser:
The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The src attribute will be ignored.
In other words, the browser does not load or run index.js in your example. This makes sense - if it did, you'd get a syntax error, as your browser can't understand JSX.
What actually happens is that the babel-standalone script looks at your HTML, finds all of the script tags marked text/babel, loads them via XMLHttpRequest, and then compiles and runs them.
This is why you're getting CORS errors - the browser's not loading the file, the script is. Unfortunately, I don't think you can resolve this without using a web server or compiling your Babel code ahead of time.
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
