2017-01-23 6 views
1

Baue eine React App mit create-react-app, damit die App serverbereit ist.'Uncaught ReferenceError: jQuery ist nicht definiert' mit create-react-app

Beim Importieren eines Bootstrap-Javascript-Plugins wie 'affix.js' erhalte ich den Fehler 'Uncaught ReferenceError: jQuery ist nicht definiert' und die Seite wird nicht mehr geladen.

Ich importiere alle Module durch die Datei index.js, da es mit der create-react-app scheint, die 'src' und 'link' Importe aus der index.html Datei zu laden.

Bin Import der Bootstrap-Plugin wie so: Import 'Bootstrap/js/affix.js'

versucht haben jquery auf folgende Weise zu importieren, an der Spitze der index.js Datei aber nicht funktioniert:

  1. Import jquery von 'jquery'
  2. Import jquery von 'jquery', Fenster $ = window.jQuery = jquery.
  3. Import jQuery von 'jquery'
  4. Import $ von 'jquery'
  5. Import 'jquery/dist/jquery.js';
  6. erfordern (‘./ node_modules/jquery/dist/jquery.js')

Irgendwelche Ideen?

+0

Ich denke, importieren Sie 'jquery' auf diese Weise nicht. Setzen Sie einfach den 'cdn jquery'-Link in die HTML-Datei, es sollte funktionieren. benutze dies: '' –

+0

@MayankShukla danke das hat funktioniert! Endlich. Ich habe schon viele andere Möglichkeiten ausprobiert. Ich denke, es hängt mit der Art und Weise zusammen, in der index.html die Ordnerverzeichnisse scannt, wenn sie Teil der create-react-App sind. Also würde CDN in diesem Fall funktionieren. Vielen Dank! Könnten Sie das auch als offizielle Antwort veröffentlichen?Sie haben mir gerade geholfen, die App mit expressJS neu aufzubauen, was ich im Tutorial tun würde, da ich noch keine nodeJs oder expressJs App erstellt habe :) Sie haben mich wahrscheinlich wie einen halben Tag gerettet. Vielen Dank! –

+0

@MayankShukla auch irgendwelche Ideen, warum meine oben genannten Importmethoden nicht funktionierten? –

Antwort

4

Erstellen Sie React App Maintainer hier.

import $ from 'jquery'; 

und dann

$.something() 

verwenden, sollten fein funktionieren, wenn Sie jQuery 2.x oder höher verwenden.

Wenn es nicht bitte ein Problem einreichen.


In Ihren Beispielen könnte das Problem sein, dass Sie import jquery from 'jquery' schrieben verwendet, aber jQuery als Variablennamen. Sie sollten import jQuery from 'jquery' (oder einen anderen Namen, solange Sie es konsistent verwenden) geschrieben haben. Bei Variablennamen wird die Groß-/Kleinschreibung in JavaScript berücksichtigt.

+0

Danke für die Antwort. Ich habe bereits versucht, $ von 'jquery' zu importieren, und es gibt denselben Fehler. Auch in Bezug auf Ihren vorherigen Kommentar können Sie hier den Quellcode sehen, wo ich derzeit jquery über CDN (https://github.com/smaameri/keywords-finder) importiere. Um den Fehler zu testen, den Sie entfernen können, entfernen Sie den CDN-Link von index.html und versuchen Sie dann, jQuery wie oben in App.js zu importieren. Sie werden den Referenzfehler sehen. Wird Dateiproblem wie Sie auch gesagt haben. –

2

Falls jemand hier landet. Ich hatte ähnliches Problem gelöst ‚erstellen reagieren-App‘ unter Verwendung dieses:

import jQuery from 'jquery'; 
window.jQuery = jQuery; 

und für andere Pakete importieren, die jQuery benötigt man die Pakete danach importieren sollte, in affix.js Fall

require 'bootstrap/js/affix.js'; 
Verwandte Themen