Integrate a fully functional page (html, css, js) in React

I have a standalone HTML, CSS, and js page that works on its own. The HTML loads js and CSS from cdns and also from files.

I want this to be integrated inside a next/react application. What I have right now is a custom URL for my page that just serves the static HTML file and it is working as expected.

The problem however is the login and user states. Since the file is static, it is hard to keep the information about the user login and other states in that file.

I tried to use the html-loader to load the HTML inside a dangerouslySetInnerHTML. And it does load the HTML. However, it doesn't load any JS or CSS files that are being loaded from the HTML file. Which I believe is something I need to solve. (Or it can just be an XY problem and hence the whole explanation before this).

Any help or nudge towards the right approach is appreciated. Thanks

Update: I tried to load all the files that I was importing in the HTML from the react app like this:

import "../public/heatmap/scripts/jquery.min.js"
import "../public/heatmap/scripts/heatmap.min.js"
import "../public/heatmap/scripts/bootstrap.bundle.min.js"
import "../public/heatmap/scripts/leaflet"
import "../public/heatmap/scripts/leaflet-heatmap"
import "../public/heatmap/scripts/main"
import "../public/heatmap/scripts/fetch_data"

But that yields in this error which I don't think makes sense as I am loading jquery before bootstrap.

Failed to parse source map: TypeError: Cannot read property 'line' of undefined
    at getNotFoundError (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:1:816)
    at getModuleBuildError (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:1:2479)
    at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:562
    at Array.map (<anonymous>)
    at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:476
    at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:8:17)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43260:38
    at eval (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:14:1)
    at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at fn (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:41174:45)
    at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at cont (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43234:34)
    at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43280:10
error - ./public/heatmap/scripts/bootstrap.bundle.min.js:7:76
Module not found: Can't resolve 'jquery'
   5 |   */
   6 | !function(t, e) {
>  7 |     "object" == typeof exports && "undefined" != typeof module ? e(exports, require("jquery")) : "function" == typeof define && define.amd ? define(["exports", "jquery"], e) : e((t = "undefined" != typeof globalThis ? globalThis : t || self).bootstrap = {}, t.jQuery)
     |                                                                            ^
   8 | }(this, (function(t, e) {
   9 |     "use strict";
  10 |     function n(t) {

Solution 1:

Next.js has Head component:

import Head from "next/head";

this is where you set up metadata for the project. Also, you can load the cdn's here. For example:

<Head>

 <link
        href="https://fonts.googleapis.com/css2?family=Alice&family=Great+Vibes&family=Inconsolata&family=Indie+Flower&family=Lobster&family=Press+Start+2P&display=swap"
        rel="stylesheet"
      ></link>

 <script
        src="https://kit.fontawesome.com/fbadad80a0.js"
        crossOrigin="anonymous"
      ></script>

<Head/>

Use this component inside Header component or BaseLayout component. A compoenent that always get rendered in your project, so cdn's will be available.

Or alternatively you can install npm packages and import them inside pages/_app.js, so they will be globally available in your project. _app.js page is responsible for rendering our pages.

Be aware that using jquery inside a react might cause some bugs with event handling.

Integrate a fully functional page (html, css, js) in React

Solution 1:

Related

Recent Posts