0

Please, I am working on a react-typescript project, created using create-react-app, a school project basically, I have two templates to use for admin dashboard and public site, both are jquery based templates with different custom jquery script that triggers owl-carousel and slicknav each, with other jquery functionalities included. Which means I have owl-carousel and slicknav also. If I decide to put the scripts in index.html, there will be conflict in both admin dashboard and public site.

QUESTION

How, how can I isolate those scripts per component, say if a user has logged in and I redirect them to the dashboard, I want to load only the admin dashboard scripts and if he visits the public site, I want to load only the public site scripts.

I tried to add them in folder in src so that I can import them respectively but, I keep getting Uncaught TypeError: $(...).slicknav is not a function, same thing for owl-carousel and also, am getting another one event is not defined.

Thanks in advance for your help.

user10688545
  • 23
  • 6
  • Can you provide a [MRE](https://stackoverflow.com/help/minimal-reproducible-example)? I'm not sure what you're doing, are you trying to use jquery functions in React components? – picklepick Feb 16 '22 at 22:44
  • Thanks for your response. What I want to do is that, I am using one project to build both admin and public site, so if the user logs in, and I redirect them to the dashboard, I have the jquery script for the navigation there handled in a separate file so, I want to load them only so that the navigation can be initialized and work. If the user has visited the public site, I want to load the jquery script that initializes the owlCarousel and slicknav. I want them in a separate file not in the same component because, it will make the component clumsy. – user10688545 Feb 16 '22 at 23:12
  • Why are you using jquery in the first place if you're also using react? You should avoid mixing jquery and react whenever possible as it's considered [bad practice](https://stackoverflow.com/a/38519125/12263543). – picklepick Feb 16 '22 at 23:14
  • Sorry, it's a template I got online. Had no option. – user10688545 Feb 16 '22 at 23:15
  • Really couldn't get a simple reactjs e-commerce template for free to use. Just had to make do with what's available. – user10688545 Feb 16 '22 at 23:18
  • The thread I linked should contain enough information to get you started. I doubt you'll get much more help here without specific code/problem. By the way, there are many react templates out there, might make sense to look a bit more and find a react version rather that making a 'disign mistake' at the very beginning of your project. – picklepick Feb 16 '22 at 23:18
  • Also, I have registered jquery in webpack.config.js respectively. – user10688545 Feb 16 '22 at 23:20

0 Answers0