ReactJS: Uncaught ReferenceError: $ не определен
Я застрял с ошибкой ниже и не могу ее исправить. В моем приложении для реагирования я установил jquery в качестве библиотеки и импортировал его в корневой компонент, поэтому я не включил cdn в свой index.html.
Uncaught ReferenceError: $ is not defined at home:13 (anonymous) @ home:13
Я нашел следующие решения, но все они говорят о включении jquery cdn в index.html, но ни один из них не говорит о решении проблемы, когда мы импортируем jquery как lib в компонент реакции.
Мой index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Netext</title>
<link rel = "icon" href = "/images/logo123.ico" type = "image/x-icon"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<!-- Import Bootstrap CSS from CDN for easy replacement/removal -->
<link rel = "stylesheet" type = "text/css" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Import bundled/compiled CSS -->
<link rel = "stylesheet" type = "text/css" href = "/app.css">
<link rel = "stylesheet" type = "text/css" href = "/circle.css">
<link rel = "stylesheet" type = "text/css" href = "/custom.css">
<link rel = "stylesheet" type = "text/css" href = "/cropper.css">
<style>
html, body {
min-height: 100%;
margin:0;
padding:0;
background: #e6ecf0 none;
}
#app{
min-width: 300px; /* 100px x3 = 300 */
min-height:100%;
}
</style>
</head>
<body>
<div id = "app" class = "wrapper">
</div>
</body>
<!-- Import bundled JavaScript -->
<script src = "/bundle.js"></script>
<script type = "text/javascript">
$(document).ready(function () {
$(window).on('scroll', function () {
if ($(window).scrollTop() >= 20) {
$('.navbar').addClass('compressed');
} else {
$('.navbar').removeClass('compressed');
}
});
});
</script>
</html>
App.js
import React, { Component } from 'react';
import HeaderTemplate from './Layout/Components/Header';
import FooterTemplate from './Layout/Components/Footer';
import imports from './common/imports';
import config from './config';
import RefreshIndicator from 'material-ui/RefreshIndicator';
import 'bootstrap/dist/css/bootstrap.min.css'
// import 'bootstrap/dist/css/bootstrap-theme.min.css' // optional
import 'jquery/dist/jquery.min.js' // I have imported jquery here
import 'bootstrap/dist/js/bootstrap.min.js'
class App extends Component {
constructor(props){
super(props);
this.state = {
showLoading: true
}
}
render() {
return (
<div>
<HeaderTemplate logo = "Postme" />
<div id = "demo-settings" className = "">
<a href = "#" id = "demo-settings-toggler" className = "fa fa-dot-circle-o"></a>
</div>
<div className = "container-fluid bodyfluid">
{this.props.children}
</div>
<FooterTemplate />
</div>
);
}
}
export default App;
PS: - Я импортирую jquery как библиотеку, но не включаю как скрипт в index.html
@ Li357 Значит, вы имеете в виду, что cdn должен быть включен как скрипт в index.html, и импорт в виде библиотеки в этом случае не сработает?
Да, чтобы использовать его во встроенном скрипте, вам нужно будет использовать CDN, потому что после того, как какой-либо упаковщик, который вы используете (например, Webpack), упакует ваш код для Интернета, модули ES6 (например, jQuery) не будут глобальными. Если вы используете Webpack, чтобы предотвратить включение jQuery дважды, один раз как модуль NPM и один раз через CDN, вы используете глобальную опцию IIRC.
Хорошо. Не могли бы вы помочь мне с источником этого глобального варианта IIRC
Мое плохое, их называют «внешними»: webpack.js.org/configuration/externals. По сути, вы включаете CDN, который предоставляет глобальный. Затем, как и пакет NPM, вы можете импортировать его везде, где вам нужен jQuery, и использовать версию CDN. Не забудьте включить jQuery перед пакетом.
Я удалил библиотеку jquery из package.json и прокомментировал в App.js. Я включил jquery cdn в index.html, но получаю Uncaught ReferenceError: jQuery сейчас не определен. Я включил следующий cdn в index.html перед ссылкой на bundle.js <script src = "ajax.googleapis.com/ajax/libs/jquery/3.1.0/…>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Тот факт, что вы импортируете jQuery в модуль ES6, не означает, что он будет доступен глобально после минификации и упаковки для Интернета. Вам необходимо включить через
<script>, чтобы он мог использоваться во встроенном скрипте.