web-dev-qa-db-ja.com

ReactJSエラー「コンパイル」に失敗しました 'define'が定義されていません

私がコンパイルしようとしているアプリケーションは、外部jqueryとそれに関連するJSファイルでコンパイルされていません。これらのファイルをReactJSアプリケーションのHTMLページにリンクしようとすると、エラーが発生します。

エラーは次のとおりです。

'define'はno-undefとして定義されていません。

このエラーは、本質的に外部ファイルであるjquery.jsファイルから発生します。このエラーを示す行は次のとおりです。

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

追加すると、これらのエラーが発生するjquery.sticky.jsファイルがあります。

「jQuery」は定義されていません

「パディング」は定義されていません

このエラーは行の下から来ています

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

enter image description here

基本的に、要点は、HTMLテンプレートをReactJSテンプレートに変換しようとしているのですが、デフォルトでReactJSがコンパイルして標準に従っているかどうかを確認するために外部JSファイルのみを追加するのに行き詰まったことです。 JSファイルの設定を除いて、テーマ全体をReactに変換できます。これについてサポートが必要です。

どんな提案でも大歓迎です:-)

javascriptjqueryreactjssticky
7
Akshay patil

表示されているのは、最初に定義しないと変数を使用できないことを示すESlintルール違反です。たとえば、次の場合はエラーが発生します。

a = 5

これはうまくいくでしょうが：

var a = 5;

問題は、jQueryなど、使用している変数をすでにグローバルに定義されているため、定義できないことです。 ESLintはこれを認識していませんが、jQueryは定義するのを忘れた他の変数と同じだと考えています。

いくつかのオプションがあります。1つは、このESLintルールを完全に無効にすることです。これを行うには、ファイルの先頭に次のコードを追加します。

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

ルールの名前no-undefはエラーメッセージに含まれています。

より良いオプションはルールを有効にしておくことですが、jQueryやpaddingなどの変数は外部パッケージによって提供されるグローバル変数であることをESLintに知らせます。これを行うには、次のコードをファイルの先頭に追加するだけです。

/* global jQuery, padding */

Es-lintの「コンパイル」エラー自体は実際にはコンパイルエラーではないことに注意してください。投稿したコードは、ブラウザーでそのまま機能する有効なコードです。 ESLintルールは、平均的な開発者が望むよりも厳しい場合があります。このような場合、これらの同じメソッドを使用して、いくつかのルールを無効にすることができます。ただし、常にルールの内容を理解し、ルールを完全に無効にせずにコードを修正する方法を検討してください。

1
dtabuenc

Webpackを使用している場合は、webpack構成に構成セクションがない可能性があります。

私は通常、次のものをWebpack構成に追加します。

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],
}
0
Thijs Kramer

エラーはeslintパラメータから発生します。 AMD環境がオンになっている場合、eslintは定義と要求のためにグローバルに登録します。

あなたの.eslintrc.json セットする：

"env": {
    "AMD": true
},
0
Melchia