Refused to execute JSX Babel?

Question

I start to learn React and I try to run this page but I caught this error : Refused to execute script from 'https://unpkg.com/browse/[email protected]/babel.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. Can anyone helps me?

<!DOCTYPE html>
<html lang="en">
<head>
    <title> React work </title>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
   <script crossorigin src="https://unpkg.com/browse/[email protected]/babel.min.js"></script>

</head>
<body>
    <div id='react-root'></div>
    <script type="text/babel">
    class Bonjour extends React.Component
    {
        render()
        {
            return (
                <h1> Hello from React </h1>
            )
        }
    }
    ReactDOM.render(
    <Bonjour/>,
    document.getElementById('react-root')
    )

</script>

</body>

</html>

CertainPerformance CertainPerformance · Accepted Answer · 2020-12-10T04:40:47

Your link is wrong. The /browse is:

https://unpkg.com/browse/[email protected]/babel.min.js

This is a webpage, not a .js file. Click the "View Raw" button to get to the plain JS:

https://unpkg.com/[email protected]/babel.min.js

Use that instead, and you get:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>

<div id='react-root'></div>
<script type="text/babel">
    class Bonjour extends React.Component
    {
        render()
        {
            return (
                <h1> Hello from React </h1>
            )
        }
    }
    ReactDOM.render(
    <Bonjour/>,
    document.getElementById('react-root')
    )
</script>

But, a suggestion - only use Babel Standalone for debugging, if possible. For real apps, once they're ready for public consumption, better to transpile the JSX on your own, then serve that to clients. (Babel Standalone makes clients transpile the code themselves, which requires quite a lot of overhead)

Refused to execute JSX Babel?

1 Answers