Uncaught ReferenceError: $ is not defined in Rails 6 jquery webpacker
Uncaught ReferenceError: $ is not defined in Rails 6 jquery webpacker
我正在使用 Rails 6.0.3.2
、ruby 2.7.1
、yarn 1.22.0
。
我正在尝试做正常的 UJS
事情,这是我遇到的错误:
VM125:1 Uncaught ReferenceError: $ is not defined
at <anonymous>:1:1
at processResponse (rails-ujs.js:283)
at rails-ujs.js:196
at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
这是我的 package.json
:
{
"name": "myapp",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/actiontext": "^6.0.2-2",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"bootstrap": "^4.4.1",
"data-confirm-modal": "^1.6.2",
"expose-loader": "^1.0.0",
"flickity": "^2.2.1",
"jquery": "3.4.1",
"local-time": "^2.1.0",
"popper.js": "^1.16.1",
"stimulus": "^1.1.1",
"trix": "^1.0.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.3"
}
}
这是我的 environment.js
:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Rails: '@rails/ujs'
}))
// environment.loaders.append('jquery', {
// test: require.resolve('jquery'),
// use: [{
// loader: 'expose-loader',
// options: '$',
// }, {
// loader: 'expose-loader',
// options: 'jQuery',
// }],
// });
module.exports = environment
正如您从上面注释掉的代码中看到的,我也尝试使用 expose-loader
每个 this answer 但这给了我其他错误。
在我的 application.js
中,我有以下内容:
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("local-time").start()
require("jquery")
import '../src/jquery.min'
.
.
.
import "controllers"
require("trix")
require("@rails/actiontext")
我该如何解决这个问题?
添加以下代码:
app/javascript/packs/application.js
window.jQuery = $;
window.$ = $;
所以 jQuery 个关键字可以被提取。
我正在使用 Rails 6.0.3.2
、ruby 2.7.1
、yarn 1.22.0
。
我正在尝试做正常的 UJS
事情,这是我遇到的错误:
VM125:1 Uncaught ReferenceError: $ is not defined
at <anonymous>:1:1
at processResponse (rails-ujs.js:283)
at rails-ujs.js:196
at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
这是我的 package.json
:
{
"name": "myapp",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/actiontext": "^6.0.2-2",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"bootstrap": "^4.4.1",
"data-confirm-modal": "^1.6.2",
"expose-loader": "^1.0.0",
"flickity": "^2.2.1",
"jquery": "3.4.1",
"local-time": "^2.1.0",
"popper.js": "^1.16.1",
"stimulus": "^1.1.1",
"trix": "^1.0.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.3"
}
}
这是我的 environment.js
:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Rails: '@rails/ujs'
}))
// environment.loaders.append('jquery', {
// test: require.resolve('jquery'),
// use: [{
// loader: 'expose-loader',
// options: '$',
// }, {
// loader: 'expose-loader',
// options: 'jQuery',
// }],
// });
module.exports = environment
正如您从上面注释掉的代码中看到的,我也尝试使用 expose-loader
每个 this answer 但这给了我其他错误。
在我的 application.js
中,我有以下内容:
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("local-time").start()
require("jquery")
import '../src/jquery.min'
.
.
.
import "controllers"
require("trix")
require("@rails/actiontext")
我该如何解决这个问题?
添加以下代码:
app/javascript/packs/application.js
window.jQuery = $;
window.$ = $;
所以 jQuery 个关键字可以被提取。