ReactJS error Failed to compile 'define' is not defined

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
},

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.