Asking for help: Uncaught ReferenceError when organizing components in React

Hello, thank you in advance for reading my problem :slightly_smiling_face:

I got “Uncaught ReferenceError: require is not defined” when I tried to organize my components. I’m currently trying to build a template for a website using React.

This is my script.js:

import HeaderElem from "./component/HeaderElem.js"

const BodyElem = function() {
  return (
    <div className='BodyElem'>
      <h1 className='BodyElem__h1'>I want to join the cool kids</h1>
        <ol className='BodyElem__ol'>
          <li>I want to join the cool kids</li>
          <li>I want to join the cool kids</li>
          <li>I want to join the cool kids</li>
          <li>I want to join the cool kids</li>
        </ol>
    </div>
  )
}


const FooterElem = function() {
  return (
    <footer className='FooterElem'>
          <small>placeholder text for footer</small>
    </footer>
  )
}


const Container = function() {
  return (
    <div className='container'>
      <HeaderElem/>
      <BodyElem/>  
      <FooterElem/>
    </div>
  )
}

const root = document.getElementById('root');
ReactDOM.render(<Container/>, root)

This is my HeaderElem:

const HeaderElemNav = function() {
  return (
    <ul className='HeaderElemNav__ul'>
      <li><a href='#'>Pricing</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  )
}


const HeaderElem = function() {
    return (
        <header className='HeaderElem'>
        <nav className='HeaderElem__nav'>
            <img class='HeaderElem__logo' src='./public/logo.jpg' alt='react logo'></img>
            <HeaderElemNav/>
        </nav>
        </header>
    )
}

export default HeaderElem;

This is my HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My awesome page</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div class="root" id="root">

    </div>
    <script src="script.js" type="text/babel"></script>
  </body>
</html>

here is what my file and folder looks like:
Asking a question in FCC forum

this is in console where it says Uncaught ReferenceError: require is not defined. Im using both Edge and Firefox browser and both says the same error.
Asking a question in FCC forum1

hello and welcome to fcc forum :slight_smile:

are you using “webpack”?

it seems to me more of a “config” related error!!

happy coding :slight_smile:

1 Like

Hi, thanks for replying!

I searched the webpack which leads me to this page webpack. And no, i dont think so :neutral_face:

I created the files ‘traditionally’ and put the script in the HTML file. I think my problem might be in there, with the webpack. Going to do some research now!

Almost forgot :sweat_smile: here is the full screen capture of the console

Hey everyone. I’m back from my research and it was as what @bappyasif said! But not just that, the babel plugin also needs to be explicitly mentioned in the package.json or package-lock.json (depending on the configuration).

For those encountering similar problem, things I did was:

  1. Set up the file according to this createapp - webpack/Parcel/Snowpack boilerplate generator
  2. The configuration might be different for every project so make sure it has everything you need.
  3. Run npm install --save-dev @babel/plugin-transform-private-property-in-object
  4. Checking what the console says when starting the project. If it says no dependencies warning again, then you are gold to go!

Hope this helps!!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.