web-dev-qa-db-fra.com

Erreur ReactJS Impossible de compiler «définir» n'est pas défini

L'application que j'essaye de compiler ne compile pas avec le jquery externe et ses fichiers JS associés. Au moment où j'essaie de lier ces fichiers à ma page HTML dans une application ReactJS, cela me renvoie des erreurs.

Les erreurs sont:

'define' n'est pas défini no-undef.

Cette erreur provient du fichier jquery.js qui est un fichier externe par nature et la ligne qui montre cette erreur est:

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

Il y a un fichier jquery.sticky.js qui, lors de l'ajout, j'obtiens ces erreurs.

'jQuery' n'est pas défini no-undef

'padding' n'est pas défini no-undef

Cette erreur vient des lignes ci-dessous

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

enter image description here

Fondamentalement, le fait est que j'essaie de convertir un modèle HTML en modèle ReactJS mais je suis resté coincé à ajouter uniquement les fichiers JS externes qui, par défaut, ReactJS compile pour voir s'ils sont conformes aux normes. Je peux convertir le thème entier en React sauf pour la configuration du fichier JS. J'ai besoin d'aide à ce sujet.

Toutes les suggestions sont les bienvenues :-)

javascriptjqueryreactjssticky
7
Akshay patil

Ce que vous voyez est simplement une violation de règle ESlint qui dit que vous n'êtes pas autorisé à utiliser une variable sans d'abord la définir. Par exemple, ce qui suit provoquerait une erreur:

a = 5

Bien que cela fonctionnerait:

var a = 5;

Le problème est que vous ne pouvez pas définir les variables que vous utilisez telles que jQuery car elles sont déjà définies globalement. ESLint ne le sait pas cependant et pense simplement que jQuery est comme n'importe quelle autre variable que vous avez oublié de définir.

Vous avez plusieurs options, l'une consiste à désactiver complètement cette règle ESLint. Pour ce faire, vous pouvez simplement ajouter ce qui suit en haut du fichier:

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

Notez que le nom de la règle no-undef a été inclus pour vous dans le message d'erreur.

Une meilleure option consiste à garder la règle activée, mais informez ESLint que des variables comme jQuery et padding sont des variables globales fournies par un package externe. Pour ce faire, vous pouvez simplement ajouter ce qui suit en haut de votre fichier:

/* global jQuery, padding */

Gardez à l'esprit que les erreurs de "compilation" es-lint ne sont pas vraiment des erreurs de compilation en soi, et le code que vous avez publié est un code valide qui fonctionnerait autrement tel quel dans le navigateur. Parfois, les règles ESLint peuvent être plus strictes que le développeur moyen ne le préférerait. Dans des cas comme celui-ci, vous pouvez utiliser ces mêmes méthodes pour désactiver certaines règles. Mais essayez toujours de comprendre ce que dit la règle et voyez comment vous pouvez corriger le code sans désactiver complètement la règle.

1
dtabuenc

Si vous utilisez webpack, il vous manque probablement une section de configuration dans votre configuration webpack.

J'ajoute généralement les éléments suivants à ma configuration de webpack:

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

L'erreur vient de vos paramètres eslint. Lorsque l'environnement AMD est activé, eslint enregistre globalement pour define et require.

Dans votre .eslintrc.json ensemble:

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