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

index.js

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




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  :(