Encountering an unexpected token error while attempting to incorporate JQuery into a React JS project

I am currently diving into the world of React.js and attempting to incorporate a side navigation bar on my homepage. However, I encountered an eslint error when trying to implement the sidebar using jQuery code. Below you will find the code snippet for the sidebar:

Despite attempting to resolve the issue by installing jQuery in node-modules with the command npm install jquery --save, I was still facing the same problem.

After scouring Google for a solution for approximately 3 hours, I have yet to come across the correct fix for this issue.

If anyone could provide assistance in resolving this issue, it would be greatly appreciated.

import $ from jQuery;

let sidebar = document.querySelector(".sidebar");
let options_menus = document.querySelector(".lwm");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");

// More code here...

Here's the code snippet from App.js:

// Code snippet for App.js

function App() {
  // App component logic

}

export default App;

And finally, index.html content is as follows:

<!DOCTYPE html>
<html lang="en"…>

  <p>Content of index.html goes here...</p>

</html>

This is the specific error message that I am encountering:

Error: Unexpected token in src\nav.js at line 1:14. Parsing error.

Answer №1

Here is the proper way to import jQuery:

import $ from "jquery" ;

Additionally,

In your nav.js file, make sure to check if variables are already available in the DOM before using them.

When you import nav.js into App.js, the JavaScript code will run before the return function, potentially causing issues when the DOM isn't ready.

To resolve this, consider placing all jQuery code within a useEffect hook in App.js or utilize the jQuery ready function as shown below:

import $ from "jquery";

$(function() {
  // Your jQuery code here
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Four Different Colour Borders in CSS

Is it possible to create a CSS border with 4 different colors on one side? Currently, I have the following: #header { border-color:#88a9eb; } I aim to achieve a border featuring four solid colors split equally at 25% each. Can this be done? I am looking ...

Enhance Your Images: Creating Stunning Colored Overlay Effects using HTML and CSS

I'm currently working on implementing an overlay effect for images on a webpage. The idea is that when the cursor hovers over an image, it will change color slightly. However, I'm facing some issues and the desired effect is not reflecting. How c ...

Eliminate a table row in Laravel by checking the input field's value is 0 with the help of jQuery

Looking to dynamically filter a table by removing rows with number fields containing a value of '0'. Is there a way to accomplish this using jQuery? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></scri ...

Activating Vue-Bootstrap components through an image click event in VueJS 2

Seeking to achieve: VueJS integration with Bootstrap for clickable cards I am currently working on a VueJS project where I want the cards to be clickable and reveal collapsible elements upon click. To accomplish this, I have implemented a button with the ...

The field must be filled in if it has not been explicitly stated as optional

Here is an example of a Django model that I am working with: class Component(models.Model): parent = models.ForeignKey( "self", on_delete=models.CASCADE, null=True, blank=True, related_name="children" ) vessel = mode ...

What could be causing the AngularUI bootstrap datepicker to not appear?

Exploring the popup datepicker demo from angularUI bootstrap, which is embedded in their page and works perfectly. However, when I tried to create a minimal plunker here, the button click does not open the calendar. Any thoughts on what might be causing th ...

Tips for updating the CSS properties of the "html" element

html { width:100%; } Looking to dynamically update the CSS of the html tag upon button click using JavaScript. The goal is to modify the existing HTML CSS code as shown below, but achieving this dynamically with a script. Is it possible? html { w ...

What is the best way to create a Snap.svg map using AngularJS?

I am in the process of creating a web interface for an online board game. My goal is to load a Snap.svg map using Snap.load asynchronously. Once the map is loaded, I intend to attach a watch to a scope property and apply colors to the map based on that pr ...

Dealing with a Nodejs/Express and Angular project - Handling the 404 error

Recently, I decided to dive into learning the MEAN stack and thought it would be a great idea to test my skills by building an application. My goal was simple: display a static variable ('hello') using Angular in the HTML. However, I ran into an ...

Attempting to design a unique CSS ribbon but hitting a roadblock with getting the perfect curve just right

I have attempted to create a CSS shape (ribbon) using border radius, but I am struggling to achieve the desired curve. The curve I manage to create does not exactly match the curve of the div in the image. background: #008712; width: 89px; height: 22p ...

Move the monitoring role from the server to the client side

I am trying to transfer an observer from my server to the client in order to subscribe to it. @SubscribeMessage('createTodo') public handleCreateTodo( @MessageBody() data: IDataForCreateTodo, @ConnectedSocket() client: S ...

Is there a method to verify the presence of a message event listener already?

Is there a method to determine if a message event listener is already in place? I am trying to accomplish something similar to this: if(noMessageEventListenerExists) { globalThis.addEventListener('message', async function (data) {}) } I have ...

Using PHP to display arrays on the screen

Currently, I am working on manipulating an array in my code. I have already accessed the array and begun the process of displaying its contents using the following code snippet: <html> <?php $file=fopen("curr_enroll_fall.csv", "r"); $records[]=fg ...

The overflow scroll feature seems to be malfunctioning and not working as intended in the

I'm trying to implement the overflow scroll property in a div to display a scroll bar for the user, but I'm facing issues. I'm unsure what the problem could be. The code I'm working with can be found here : http://fiddle.jshell.net/Gg ...

Issue: 'node' is not being recognized when attempting to execute the file using the package.json script

Currently diving into the world of Node.js, I encountered an issue stating "node is not recognized as an internal or external command" whenever I attempt to start my project using either npm start or npm run start. Strangely enough, running node index.js ...

Utilize flexbox to create a list that is displayed in a column-reverse layout

I am facing a challenge in displaying the latest chat person in the 1st position (active) using Firebase. Unfortunately, Firebase does not have a date field which makes it difficult to achieve this. I have attempted converting the date into milliseconds an ...

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...

The width of table cells within a div is completely disregarded

The cell width property seems to be ignored in this situation. Despite trying numerous approaches, the cells are splitting into equal portions and not respecting the specified width. Inspecting the code did not reveal any unexpected inheritance that could ...

"Ensuring Security with Stripe Connect: Addressing Content Security Policy Challenges

Despite using meta tags to address it, the error persists and the Iframe remains non-functional. <meta http-equiv="Content-Security-Policy" content=" default-src *; style-src 'self' 'unsafe-inline'; ...

React renders identical values in all text fields

I am facing an issue with rendering text fields based on an array of objects. Whenever I submit a value to one input field, all the other inputs display the same value. My goal is to only show the value submitted to a specific input field. Sample Code thi ...