ReactJS error Failed to compile 'define' is not defined

Question

The application which I'm trying to compile is not compiling with the external jquery & its associated JS files. The moment I try to link those files to my HTML page in a ReactJS application, it throws me below errors.

Errors are :

'define' is not defined no-undef.

This error comes from the jquery.js file which is a external file by nature & the line which shows this error is :

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
}

There is a jquery.sticky.js file which upon adding I get these errors.

'jQuery' is not defined no-undef

'padding' is not defined no-undef

This error comes from below lines

 padding =  s.stickyElement.innerWidth() - s.stickyElement.width();

Basically, the point is that I'm trying to convert an HTML template to ReactJS template but I got stuck at adding the external JS files only which by default ReactJS compiles to see if are as per the standards. I am able to convert the entire theme to React except for the JS file setup. I need help in this.

Any suggestions are welcome :-)

Answer 1

The error comes from your eslint parameters. When the amd environment is turned on, eslint registers global for define and require.

In your .eslintrc.json set:

"env": {
    "amd": true
},

Answer 2

What you are seeing is simply a ESlint rule violation that says you are not allowed to use a variable without first defining it. For example the following would cause an error:

a = 5

While this would work:

var a = 5;

The problem is that you can't define the variables you are using such as jQuery because they are already defined globally. ESLint does not know this though, and just thinks jQuery is like any other variable that you forgot to define.

You have several options, one is to just disable this ESLint rule altogether. To do this you can just add the following at the top of the file:

/* eslint no-undef: "off"*/

Notice that the name of the rule no-undef was included for you in the error message.

A better option is to keep the rule enabled, but let ESLint know that variables like jQuery and padding are global variables provided by an external package. To do this you can simply add the following to the top of your file:

/* global jQuery, padding */

Keep in mind, es-lint "compile" errors are not really compile errors per se, and the code you posted is valid code that would otherwise work as-is in the browser. Sometimes ESLint rules can be stricter than the average developer would prefer. In cases like this, you can use these same methods to disable some rules. But always try to understand what the rule is saying and consider how you could fix the code without completely disabling the rule.