This is my first react project. I am using React-18, and Typescript. I created the app using Vite.
There is a bootstrap html template that I have to convert in React now. While converting the template,
First, I faced the issue of .js files in public folder was not working even though the script tag was in index.html file.
However, I solved the issue using react-helmet in my project.
I am providing the code snippet of my App.tsx file here..
import { Helmet, HelmetProvider } from 'react-helmet-async';
import Home from './pages/Home';
function App() {
return (
<HelmetProvider>
<Home />
<Helmet>
<script src='/js/modernizr-2.8.3.min.js'></script>
<script src='/js/main.js' type="text/javascript"></script>
<script src='/js/plugins.js' type="module" async></script>
</Helmet>
</HelmetProvider>
)
}
export default App;
Now, after running the code, the html output looks perfect and behaves as I expected so far. However, I am getting this error in the console of Chrome developer's tool - "Uncaught TypeError: Cannot set properties of undefined (setting 'EvEmitter') at plugins.js:3547:182"
Here is the code snippet of plugins.js file line 3547 onwards: (this file came with the bootstrap template package)
! function(t, e) { "function" == typeof define && define.amd ? define("ev-emitter/ev-emitter", e) : "object" == typeof module && module.exports ? module.exports = e() : **t.EvEmitter = e() }(this, function() **{
function t() {}
var e = t.prototype;
return e.on = function(t, e) {
if (t && e) {
var i = this._events = this._events || {},
n = i[t] = i[t] || [];
return -1 == n.indexOf(e) && n.push(e), this
}
}, e.once = function(t, e) {
if (t && e) {
this.on(t, e);
var i = this._onceEvents = this._onceEvents || {},
n = i[t] = i[t] || [];
return n[e] = !0, this
}
}, e.off = function(t, e) { var i = this._events && this._events[t]; if (i && i.length) { var n = i.indexOf(e); return -1 != n && i.splice(n, 1), this } }, e.emitEvent = function(t, e) {
var i = this._events && this._events[t];
if (i && i.length) {
var n = 0,
o = i[n];
e = e || [];
for (var r = this._onceEvents && this._onceEvents[t]; o;) {
var s = r && r[o];
s && (this.off(t, o), delete r[o]), o.apply(this, e), n += s ? 0 : 1, o = i[n]
}
return this
}
}, t
}),
Can any one please help me to solve this issue? Also, I will highly appreciate it if you point out any bad programming practice or flaws in my coding pattern as a React developer. I am also providing the snippet of the index.html in case you want to have a look.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>My App Title</title>
<link rel="icon" href="img/icons/favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- All CSS files included -->
<link rel="stylesheet" href="css/elements.css">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- User style -->
<link rel="stylesheet" href="css/custom.css">
<script type="text/javascript" src="js/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<!-- All JS files included -->
<script src="js/plugins.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
I also tried using useEffect hook, both had the same impact in the console output as well as the loaded webpage behavior.
Here is another thing to mention, this error in console arose after I mentioned the type="module" of the plugins.js file. If I leave it blank or type="text/javascript" for plugins.js file then there is an extra HTML element at the end of the loaded page. But the error in the console goes away that time. But the webpage does not load or behave as it is expected.