Skip to main content

How to use React router as html script ? cant find createBrowserHistory from @remix-run/router when am using react/components/router in plain html

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/history@5.3.0/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 ?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/mU1xSnd

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...
Post a Comment
Read more

Sorting large arrays of big numeric stings

I was solving bigSorting() problem from hackerrank: Consider an array of numeric strings where each string is a positive number with anywhere from to digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array. I know it works as follows: def bigSorting(unsorted): return sorted(unsorted, key=int) But I didnt guess this approach earlier. Initially I tried below: def bigSorting(unsorted): int_unsorted = [int(i) for i in unsorted] int_sorted = sorted(int_unsorted) return [str(i) for i in int_sorted] However, for some of the test cases, it was showing time limit exceeded. Why is it so? PS: I dont know exactly what those test cases were as hacker rank does not reveal all test cases. source https://stackoverflow.com/questions/73007397/sorting-large-arrays-of-big-numeric-stings
Post a Comment
Read more

How to load Javascript with imported modules?

I am trying to import modules from tensorflowjs, and below is my code. test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title </head> <body> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> <script type="module" src="./test.js"></script> </body> </html> test.js import * as tf from "./node_modules/@tensorflow/tfjs"; import {loadGraphModel} from "./node_modules/@tensorflow/tfjs-converter"; const MODEL_URL = './model.json'; const model = await loadGraphModel(MODEL_URL); const cat = document.getElementById('cat'); model.execute(tf.browser.fromPixels(cat)); Besides, I run the server using python -m http.server in my command prompt(Windows 10), and this is the error prompt in the console log of my browser: Failed to loa...
Post a Comment
Read more