React function not importing

[crab]

I’ve been using repl.it all this while but when I tried to import a function from App.jsx into index.jsx in vs code it wasnt working .

The code is very simple and I think someone with very basic knowledge can help.

The error in the browser console is →

      
      Uncaught ReferenceError: require is not defined
   at <anonymous>:3:12
   at run$1 (babel.js:100312:12)
   at check (babel.js:100365:11)
   at result.<computed>.Object.assign.content (babel.js:100390:11)
   at XMLHttpRequest.xhr.onreadystatechange (babel.js:100326:11)

Code in index.jsx

import React from "react"
import Something from "./App";

class App extends React.Component {

    render(){

        let date = new Date();

        const hours = date.getHours();

        let timeOfTheDay;

        if(hours < 12) timeOfTheDay = "morning";

        else if(hours > 12 && hours < 20) timeOfTheDay = "evening"

        else timeOfTheDay = "night"

        return (

            <>

            <h1>Good {timeOfTheDay}</h1>

            <Something />

            </>

        )

    }

}

const root  = document.getElementById("root");

ReactDOM.render(<App />, root);

Code in App.jsx

import React from "react"

export default function Something(){

    return(

        <h1>Test, why wont this work</h1>

    )

}

Extra notes →

Npm version → 6.14.4
Node version → 13.13.0
I didnt use create-react-app
react-dom works. i know this since all the code works if it runs from only a single file.

[lasjorg]

I would suggest using CRA or Vite. Vite is super fast and takes no time to set up compared to CRA.

Scaffolding Your First Vite Project

# npm 6.x
npm init vite@latest my-react-app --template react

[crab]

Wow . Thanks a lot ! This actually works .
All the previous problems I had are fixed.

Just wanted to ask something- >
If I need to run this later (like for eg: i shut down the pc/cmd and later need to try it) , I just need to cd to the my-react-app and run npm run dev without npm install, correct ?

[miku86]

You have to run npm install only once after setting up the vite project.

If you did it once, you normally do not have to run npm install again.
There should be a folder named node_modules in your project folder.

[crab]

@miku86

You have to run npm install only once after setting up the vite project.

Yeah, I guess. I dont use npm much to develop.
I figured cd'ing to the location and using npm run dev after installing npm install just once would do it. Thx.