0

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';
evolutionxbox
  • 3,932
  • 6
  • 34
  • 51
Paul
  • 25,812
  • 38
  • 124
  • 247
  • Does this answer your question? [Do I need require js when I use babel?](https://stackoverflow.com/questions/31593694/do-i-need-require-js-when-i-use-babel) --- Although I don't know if that question talks about non-transpiled code. – evolutionxbox Sep 29 '20 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 Sep 29 '20 at 22:25
  • @evolutionxbox the link is definitely valuable information, but I don't think it answers the question. – Emile Bergeron Sep 29 '20 at 22:26
  • @Paul which version are you using? Could you provide an [interactive stack snippet](https://meta.stackoverflow.com/a/338538/1218980)? – Emile Bergeron Sep 29 '20 at 22:28
  • 1
    I've changed it to a stack snippet. – evolutionxbox Sep 29 '20 at 22:35
  • 1
    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 Sep 29 '20 at 22:40

1 Answers1

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    So, I conclude that EVERY include in examples belongs to server side Javascript. Right? – Paul Sep 29 '20 at 22:27
  • @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! – Emile Bergeron Sep 29 '20 at 22:45
  • 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. – Paul Sep 29 '20 at 22:47
  • @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! – Emile Bergeron Sep 29 '20 at 22:58