0

I have this simple react sample using cdn and this are my code. This was all in the same folder.

This is my index.html

    <html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="news"></div>
    <script type="text/babel" src="news.js"></script>
  </body>
</html>

This is my News.js

'use strict';

const React = window.React;
const ReactDOM = window.ReactDOM;
const e = React.createElement;
import NewsContent from './NewsContent';

function News(props) {
  return (
    <div className="container">
      <NewsContent />
    </div>
  );
}

const domContainer = document.querySelector('#news');
const root = ReactDOM.createRoot(domContainer);
root.render(e(News));

My NewsContent.js

'use strict';

const React = window.React;
const e = React.createElement;

function NewsContent(props) {
  return (
    <div>
      <h1>News Content</h1>
      <p>Lorem Ipsum</p>
    </div>
  );
}

export default NewsContent;

My problem is that I tried to import NewsContent component into the news.js it gives me an error said "Uncaught ReferenceError: require is not defined" This is the screenshot of the error. error_image How can I fix this? THank you.

Uncaught ReferenceError: require is not defined
    at <anonymous>:6:19
    at lve (transformScriptTags.ts:99:10)
    at n (transformScriptTags.ts:173:9)
    at s (transformScriptTags.ts:204:11)
    at t.forEach.e.src.o.onreadystatechange (transformScriptTags.ts:121:9)
Exequiel Vibar
  • 3
  • 4
  • I don't see any `require` in the code you shared. You should include the whole stacktrace, not only the first line. – Valentin Feb 07 '23 at 15:33
  • Thank you for your answer but what do you mean by stacktrace? – Exequiel Vibar Feb 07 '23 at 15:47
  • There should be more than just "Uncaught ReferenceError: require is not defined". A stacktrace is the list of function calls where the error happens. – Valentin Feb 07 '23 at 15:51
  • @Valentin this is the screen shot of the error. https://i.stack.imgur.com/YRyAL.png. Thank you. – Exequiel Vibar Feb 07 '23 at 15:58
  • You should edit your question and add this stacktrace as text. Please make sure the filenames are fully visible. – Valentin Feb 07 '23 at 16:01
  • Are you using babel in the browser? – Valentin Feb 07 '23 at 16:12
  • I used babel using a cdn that included in index.html – Exequiel Vibar Feb 07 '23 at 16:14
  • Sorry I didn't notice. Seems that `babel` is making use of `require`, which does not exist in the browser. Here is [a similar question](https://stackoverflow.com/questions/19059580/client-on-node-js-uncaught-referenceerror-require-is-not-defined) regarding this problem. – Valentin Feb 07 '23 at 16:23

0 Answers0