![](/img/trans.png)
[英]Uncaught ReferenceError: ReactDOM is not defined with bundle.js
[英]jQuery is not defined in bundle.js
我已經被這個問題困擾了好幾天了,我已經從搜索中嘗試了幾十種不同的修復方法。 首先,我使用的是 Hugo、Webpack、Node.js 和 Babel。 目前,至少一切都在編譯,但是當我查看 localhost 控制台時,我看到了這些錯誤:
Uncaught ReferenceError: jQuery is not defined
at Object.609 (bundle.js:2)
at n (bundle.js:2)
at Object.83 (bundle.js:2)
at n (bundle.js:2)
at Module.150 (bundle.js:2)
at n (bundle.js:2)
at bundle.js:2
at bundle.js:2
609 @ bundle.js:2
n @ bundle.js:2
83 @ bundle.js:2
n @ bundle.js:2
150 @ bundle.js:2
n @ bundle.js:2
(anonymous) @ bundle.js:2
(anonymous) @ bundle.js:2
localhost/:1 Refused to apply style from 'http://localhost:1313/scss/node_modules/bootstrap-icons/font/bootstrap-icons.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:1313/node_modules/animate.css/source/animate.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:1313/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/plugins/magnific-popup/magnific-popup.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
現在我寫這篇文章的主要理由是解決 jQuery 問題,但深入了解另一個問題也很好,因為我也被困了一段時間。
const path = require('path');
const webpack = require('webpack');
// const WebpackManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
}
]
},
entry: './assets/js/script.js',
output: {
path: path.resolve(__dirname, 'assets', 'js'),
filename: 'bundle.js',
},
externals: {
jquery: 'jQuery',
},
/* plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]*/
};
我從 script.js(又名主 js 文件)導入:
app.use("/static", express.static('./static/'));
import $ from "../plugins/jquery/jquery.min.js";
import jQuery from "../plugins/jquery/jquery.min.js";
import "../plugins/@popperjs/core/lib/popper.js";
import "../plugins/google-map/map.js";
import "../plugins/magnific-popup/jquery.magnific-popup.min";
import Shuffle from "../plugins/shuffle/shuffle.min.js";
import "../plugins/slick/slick.min.js";
import lozad from "lozad";
//Pricing Scripts
import "../js/pricing/boosting.js";
import "../js/pricing/tourneyTitle.js";
import "../js/pricing/placements.js";
import "../js/pricing/coaching.js";
/* ========================================================================= */
/* jQuery load initialize
/* ========================================================================= */
window.$ = require('../plugins/jquery/jquery.min');
window.jQuery = $;
require('./script.js');
/* ========================================================================= */
/* shuffle load initialize
/* ========================================================================= */
const shuffleInstance = new Shuffle(document.getElementById('grid'), {
itemSelector: '.js-item',
sizer: '.js-shuffle-sizer',
});
/* ========================================================================= */
/* lazy load initialize
/* ========================================================================= */
const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe();
為我的主要 js 源調用捆綁包
<script src="./assets/js/bundle.js"></script>
請注意,這不在靜態/資產中,因為當我嘗試它不起作用並給我一個錯誤說您無法將 static 文件發送到客戶端或 Web 時(類似於這些行)。 我的資產目錄相當於我認為的 src 目錄。
“jQuery 未定義”錯誤通常意味着您沒有加載 jQuery 庫。 我猜您嘗試使用 ES6 Import 語法?
import { $, jQuery } from 'jquery';
類型語句取決於您使用的 jQuery 版本,請檢查(我不知道您要拉的是什么版本的 jQuery),jQuery 導入似乎有點不同? 請參閱上面的導入語句。<script type="text/javascript" src="https:// CDN LINK HERE "></script> and see if
可以獲得基本信息jQuery 語句在控制台中工作。很抱歉我的英語不是最好的,但以上內容可能有助於調試。
請讓我知道。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.