Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

JS problem on HTML theme which I am using it in React project


Hi, I have a React project and use your HTML themes. When I add JS files, they run but there are two console error. Because of these errors, theme modules are not working correctly. How can I fix it? I don't want to directly your React projects. Thank you.


index.html

<img src="https://i.postimg.cc/PxwnxMYH/ringo-1.png" />


index.js

<img src="https://i.postimg.cc/vZVr0grB/ringo-2.png" />


App.js


import Footer from "./partials/Footer";
import Header from "./partials/Header";
import Sidebar from "./partials/Sidebar";
import Scrolltop from "./partials/Scrolltop";

import {
Routes,
Route,
} from "react-router-dom";

import {Helmet} from "react-helmet";

import Dashboard from "./pages/Dashboard";
import Projects from "./pages/projects/Projects";
import Project from "./pages/projects/Project";

function App() {
return (
<div className="d-flex flex-column flex-root app-root" id="kt_app_root">
<div className="app-page flex-column flex-column-fluid" id="kt_app_page">

<Header />

<div className="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">

<Sidebar />

<div className="app-main flex-column flex-row-fluid" id="kt_app_main">
<div className="d-flex flex-column flex-column-fluid">
<div id="kt_app_content" className="app-content flex-column-fluid">
<div id="kt_app_content_container" className="app-container container-xxl">

<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/projects" element={<Projects />}>
<Route path=":projectId" element={<Project />} />
</Route>
</Routes>

</div>
</div>
</div>

<Footer />
</div>
</div>
</div>

<Scrolltop />

<Helmet>
<script src="/assets/js/theme-mode.js"></script>
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/scripts.bundle.js"></script>
</Helmet>

</div>
);
}

export default App;


Note: SmoothScroll error break menus and data-kt-menu-trigger features. Other error break theme mode

<img src="https://i.postimg.cc/P5Vqv2pv/ringo-3.png" />
<img src="https://i.postimg.cc/9XPFYWwh/ringo-4.png" />
<img src="https://i.postimg.cc/kXVYd5Nr/ringo-5.png" />
<img src="https://i.postimg.cc/xdPtPNQm/ringo-6.png" />


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

About the error with SmoothScroll, try to use https://github.com/cferdinandi/smooth-scroll, you need somehow add a polyfill of SmoothScroll.

About the second error => difficult to help you with this, cause we can't support a mix of HTML+jQuery versions with a custom React application. HTML+jQuery version isn't SPA ready, not sure that it can be merged with React page(component) life circle.

Regards,
Keenthemes support


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(