Home » Javascript » javascript – How to solve require is not defined while using CDNs for babel and react?

javascript – How to solve require is not defined while using CDNs for babel and react?

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am currently trying to integrate a React App into a PHP website as a backend. And I am using CDNs for Babel and React. I have read many tutorials about webpack, but they only come up with an HTML and to run on NPM server or something.

<script type="text/babel" src="react_apps/App.js"></script>

I have added the react-app using the script below.
And it works perfectly fine without any imports but I want to have a cleaner look and need to join two files together to work. So I finally created two components and import it as I have learned to do it in create-react-app.

import MainDashBoard from './MainDashboard/MainDashboard'
import SideNav from './SideNav/SideNav'
function App(){
    return(
        <div>
            <MainDashBoard />
            <SideNav />
        </div>
    )
}
ReactDOM.render(<App />, document.getElementById("MainReact"))

However, I am getting the error “require is not defined” in the console log. Here is the console log: Console log

Is there anyway to make this work or do I need to run two separate server? One for PHP and one for NPM?
I am really new to npm.

How to&Answers: