The correct usage of import directive in JavaScript

Question

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';

Does this answer your question? Do I need require js when I use babel? --- Although I don't know if that question talks about non-transpiled code. — evolutionxbox
– evolutionxbox, Commented Sep 29, 2020 at 22:23
Since you're not in a module context, you can use React directly as it's been defined on the global object by linking the scripts directly. — Emile Bergeron
– Emile Bergeron, Commented Sep 29, 2020 at 22:25
@evolutionxbox the link is definitely valuable information, but I don't think it answers the question. — Emile Bergeron
– Emile Bergeron, Commented Sep 29, 2020 at 22:26
Ok now I understand that stack snippets is a formatting on StackOverflow and not some browser function that will help me to debug JavaScript. — Paul
– Paul, Commented Sep 29, 2020 at 22:40

Quentin · Accepted Answer · 2020-09-30 06:51:07Z

1

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.

edited Sep 30, 2020 at 6:51

answered Sep 29, 2020 at 22:26

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Paul Over a year ago

So, I conclude that EVERY include in examples belongs to server side Javascript. Right?

Emile Bergeron Over a year ago

@paul I upvoted your comment, and you can develop a client-side only application with node.js only for the local toolchain. Once built, you can move the resulting static files to a CDN and voilà, no Node server needed at all!

Paul Over a year ago

Please understand me. I just started to try React.js and all the first examples require to use Node.js, but this information is mostly omitted as a matter of course. When they provide examples they do not mention on which side (Server/Client) to apply them. I never worked with server side JS.

Emile Bergeron Over a year ago

@Paul I totally get you, I've been there as well! I think this feeling is worse when diving directly into a specific framework as the documentation and most tutorials assume you're already familiar with the ecosystem and/or other frameworks. Good luck!

Collectives™ on Stack Overflow

The correct usage of import directive in JavaScript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related