无法读取未定义的 属性 'jquery'

Question

我有一个带有 Webpacker 的 Rails 6 应用程序。节点包已成功安装 yarn.

该应用程序在本地使用 Puma 服务器在开发和生产模式下工作。但是在我们的虚拟主机上调用网站时，Phusion Passenger 无法加载 Bootstrap 4 JavaScript 部分：

/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:21178
          var e = i.default.fn.jquery.split(' ')[0].split('.');
                               ^

TypeError: Cannot read property 'jquery' of undefined
    at Object.jQueryDetection (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:21178:32)
    at a (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:21183:9)
    at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:22435:56)
    at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
    at Module.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:18176:7)
    at Module.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:18179:7)
    at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
    at /var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:26:98
    at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:27:2)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)

app/javascript/packs/application.js:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

console.log('Webpacker: START application.js');

require('@rails/ujs').start();
require('turbolinks').start();
require('@rails/activestorage').start();
require('channels');
require('jquery');

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

// #################### Proprietary configuration ####################

// JAVASCRIPT LIBRARIES
import 'popper.js';
import 'bootstrap';
import '@fortawesome/fontawesome-free';

// CSS OF USED LIBRARIES
import 'stylesheets/application';

// datetime picker
// load "moment" globally to avoid:
// "Error: Tempus Dominus Bootstrap4's requires moment.js. Moment.js must be included before Tempus Dominus Bootstrap4's JavaScript."
// See 
global.moment = require('moment');
require('moment/locale/de');
// If you require timezone data (see moment-timezone-rails for additional file options)
// import "moment-timezone-with-data"
require('tempusdominus-bootstrap-4');

console.log('Webpacker: END application.js');

config/webpack/environments.js（不知道这里说的对不对）：

const { environment } = require('@rails/webpacker')

const webpack = require('webpack');
environment.plugins.prepend('Provide', // append
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery' // ,
      // Popper: ['popper.js', 'defaults']
    })
);

module.exports = environment

package.json:

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@popperjs/core": "^2.10.1",
    "@rails/activestorage": "^6.1.4-1",
    "@rails/ujs": "^6.1.4-1",
    "@rails/webpacker": "5.4.3",
    "bootstrap": "4.6.0",
    "jquery": "^3.6.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "popper.js": "^1.16.1",
    "tempusdominus-bootstrap-4": "^5.39.0",
    "tempusdominus-core": "^5.19.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": {
    "webpack-dev-server": "^3"
  }
}

当我使用

if (typeof window !== "undefined") {
  require('popper.js');
  require('bootstrap');
  require('@fortawesome/fontawesome-free');
}

就像在 中一样，我得到另一个错误：

/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1785
      return window.document;
      ^

ReferenceError: window is not defined
    at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1785:7)
    at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1786:7)
    at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
    at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:6524:10)
    at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
    at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1682:110)
    at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1772:8)
    at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
    at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1860:7)
    at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)

我错过了什么？

Answer 1

Rails 带有 Webpacker 的应用程序不能 运行 作为 Node.js 应用程序另外，尽管有一些 Node 包与 Webpacker 一起使用。它们仅适用于客户端。

虚拟主机上的 Phusion Passenger 配置为不加载我所有大量试用修复的频繁应用程序更改。这就是为什么当我几周前尝试上述解决方案时错误没有消失的原因;-)

---

是正确的。只需将 application.js 中的所有 Javascript 库加载包装到条件中：

if (typeof window !== "undefined")