I know how to make react applications using ‘create-react-app’ but in this particular use case i need to include all the dependencies from cdns the components need to be dynamically generated via php and are to be included as babel src script tags then babel Babel.transformScriptTags(); needs to be run to start the react application. This is the sctrict requirement in my situation that all of this needs to be generated dynamically via php then when all is loaded in browser i need to stert the react app on the client side.
For brevity to present here i have just included the code in script tags as static in the same html file.
When i am just only displaying the components the react app does start this problem arises when i am using react router as a js file;
The issue here is react router cant find the “createBrowserHistory” also the route does not render giving error
“React.createElement: type is invalid”
“index.tsx:341 Uncaught TypeError: Cannot read properties of undefined (reading ‘createBrowserHistory’)”
there is an import in the generate index.tsx as follows
import {
createRouter,
createBrowserHistory,
createHashHistory,
joinPaths,
stripBasename,
ErrorResponse,
UNSAFE_invariant as invariant,
UNSAFE_warning as warning,
} from "@remix-run/router";
will including this manually solve the problem ? or is there something else ? if it is possible to run router this way what is the mistake i am doing ?
<!DOCTYPE html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/history.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-router/6.14.1/react-router.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.14.0/react-router-dom.development.js"></script>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="root"> ROOT </div>
<script crossorigin type="text/babel" data-type="module" data-plugins="transform-modules-umd" defer src="./components/Demo.js"></script>
<script crossorigin type="text/babel" data-type="module" data-plugins="transform-modules-umd" defer src="./App.js"></script>
<script crossorigin type="text/babel" data-type="module" data-plugins="transform-modules-umd" defer src="./index.js"></script>
<script type="text/javascript">
//window.createBrowserHistory = HistoryLibrary.createBrowserHistory;
window.onload = function () {
new Promise(function (resolve, reject) {
var script = document.createElement('script');
script.setAttribute('type', 'application/javascript');
script.onload = resolve;
script.onerror = reject;
script.src = 'https://unpkg.com/@babel/standalone/babel.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
}).then(function () {
console.log('running babel');
Babel.transformScriptTags();
});
}
</script>
<script type="text/babel" data-type="module" data-plugins="transform-modules-umd">
</script>
<script type="text/babel" data-type="module">
</script>
</body>
</html>
import React, { Component } from "React";
const Demo = (props) => {
console.log('demo');
return (
<div>demo : {props.type}</div>
)
}
export default Demo;
import React from "React";
import ReactDOM from 'ReactDOM';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
import React from "React";
//import ReactDOM from 'ReactDOM';
import { createBrowserHistory } from "HistoryLibrary";
import { BrowserRouter } from "ReactRouterDOM";
import AppRoutes from './AppRoutes';
import Demo from './components/Demo';
function App() {
return (
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
);
}
export default App;
import React, { Component } from "React";
import { createBrowserHistory } from "HistoryLibrary";
import { Routes, Route, Outlet, Link } from "ReactRouterDOM";
import Demo from './components/Demo';
function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Demo type="main" />}>
<Route index element={<Demo type="main" />} />
<Route path="about" element={<Demo type="about" />} />
<Route path="dashboard" element={<Demo type="dashboard" />} />
<Route path="*" element={<Demo />} />
</Route>
</Routes>
);
}
export default AppRoutes;
I have tried using the basic react components which works in the above method but now i am trying to use react router this way and it does not work. I know and have used react router in create-react-app and have made several projects also but never done as a html include so is this possible to do if so then how ?
