Asking for help: Uncaught ReferenceError when organizing components in React

JavaScript
1

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

2

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
3

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!

4

Asking a question in FCC forum2
Asking a question in FCC forum21920×453 26.2 KB

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

5

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!!

6

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