CODEWITHSUNDEEP
javascriptreactjs
Paul
Paul

Reputation: 26690

The correct usage of import directive in JavaScript

What do I need to make the following work?

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <script type="text/babel">
    import React from 'react';
  </script>
</body>
</html>

In its current form it produces an error:

Inline Babel script:2 Uncaught ReferenceError: require is not defined
    at <anonymous>:3:14
    at run (babel.js:61531)
    at check (babel.js:61597)
    at loadScripts (babel.js:61638)
    at runScripts (babel.js:61668)
    at transformScriptTags (babel.js:336)
    at babel.js:327

This form does not work too:

import React from 'react.production.min';

Upvotes: 0

Views: 162

Answers (1)

Quentin
Quentin

Reputation: 944528

If you are building a React application with client-side babel: You don't use import.

import React from 'react'; is replaced by the first two <script> elements you have in your HTML document.

If you want to use modules with React, you'd be better off taking "Setup Option 2" in the React tutorial and putting together a local development environment that uses babel at build time instead of at run time.

Upvotes: 1

Related Questions