ReactJS 错误未能编译 'define' 未定义 [英] ReactJS error Failed to compile 'define' is not defined

问题描述

我试图编译的应用程序没有使用外部 jquery & 编译.其关联的 JS 文件.当我尝试将这些文件链接到 ReactJS 应用程序中的 HTML 页面时，它会引发以下错误.

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.

错误是:

'define' 没有被定义为 no-undef.

'define' is not defined no-undef.

这个错误来自 jquery.js 文件，它本质上是一个外部文件 &显示此错误的行是:

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);
}

有一个 jquery.sticky.js 文件，添加后我得到这些错误.

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

'jQuery' 未定义 no-undef

'jQuery' is not defined no-undef

'padding' 未定义 no-undef

'padding' is not defined no-undef

此错误来自以下几行

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

基本上，重点是我正在尝试将 HTML 模板转换为 ReactJS 模板，但我一直坚持只添加外部 JS 文件，默认情况下 ReactJS 会编译这些文件以查看是否符合标准.除了 JS 文件设置之外，我能够将整个主题转换为 React.我需要这方面的帮助.

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.

欢迎任何建议:-)

推荐答案

您所看到的只是违反 ESlint 规则的一个问题，即您不能在未先定义变量的情况下使用它.例如，以下将导致错误:

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

虽然这可行:

var a = 5;

问题是你不能定义你正在使用的变量，比如 jQuery，因为它们已经被全局定义了.不过 ESLint 并不知道这一点，只是认为 jQuery 就像您忘记定义的任何其他变量.

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.

您有多种选择，一种是完全禁用此 ESLint 规则.为此，您只需在文件顶部添加以下内容:

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"*/

请注意，错误消息中包含了规则 no-undef 的名称.

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

更好的选择是保持规则启用，但让 ESLint 知道像 jQuery 和 padding 这样的变量是由外部包提供的全局变量.为此，您只需将以下内容添加到文件顶部:

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 */

请记住，es-lint编译"错误本身并不是真正的编译错误，您发布的代码是有效的代码，否则会在浏览器中按原样运行.有时 ESLint 规则可能比一般开发人员希望的更严格.在这种情况下，您可以使用这些相同的方法来禁用某些规则.但始终尝试了解规则的含义，并考虑如何在不完全禁用规则的情况下修复代码.

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.

这篇关于ReactJS 错误未能编译 'define' 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！