Search code examples
javascriptreactjsbabeljs

I trying to use babel and react but I keep getting an error

I'm trying to use babel and react but every time I open the browser I keep getting a error in the console "Uncaught Error: Module name "react" has not been loaded yet for context: _. Use require([])". When this error happens nothing renderers to the screen. I don't know what I'm doing wrong.

<!DOCTYPE html>
<html lang="us">
<head>
<title>Test</title>
<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@6/babel.min.js"></script>
<script src="./node_modules/requirejs/bin/r.js"></script>
<script src="./app.js" type="text/babel"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render<<p>Main page</p>);
Solution

  • Turns out I had a duplicate of requireJS in my node_modules folder, I had to uninstall and reinstall requireJS. I could of also did npm dedupe instead of reinstalling it. Afterwards it worked fine.