Get rid of Babel(StandAlone) warning message from CDN package

user_14252981 0
Viewed 447

We are using React JS CDN for certain sections in our project. For quality purpose, we want to deliver warnings free code to the client.

We are using following libraries:

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

The problem is that we are getting the following warning message in console:

You are using the in-browser Babel transformer. Be sure to precompile your scripts for production

We know this is not much of a problem, but we do want to remove this warning from our web app console. Should we make any changes in code, or do anything else? Please guide, how to eradicate this warning message. Thanks in advance.

babeljs reactjs cdn console warnings
1 Answers

Babel Standalone is meant to be a convenient tool for debugging and discussion about code online (such as on Stack Overflow in Stack Snippets), but the method by which it works is quite inefficient - it's a large package, and transforming JSX to JS in the browser takes up a good chunk of the client's resources.

For production sites, the best approach here is to do as the warning recommends, and instead precompile your React's JSX to plain JavaScript, so that you can serve a single plain JavaScript file to clients. This way, the code only has to be compiled once, on your server's end, rather than on the client's end every time the client loads a page.

For an easy start to this process, consider create-react-app. You will need Node and NPM.

When you’re ready to deploy to production, running npm run build will create an optimized build of your app in the build folder.

Then you only have to serve that, instead of making clients rely on also downloading and parsing React, React DOM, and Babel Standalone.

user_95152070
Related