时间戳

首页 > 解决方案 > Rails 6 + webpack：TypeError：this.getOptions不是函数

javascript - Rails 6 + webpack：TypeError：this.getOptions不是函数

问题描述

我整天都在为这个错误苦苦挣扎：

Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (:3000/Users/adam/rubydev/qualifyr/node_modules/sass-loader/dist/index.js:25)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss (index.js:34)
    at __webpack_require__ (bootstrap:63)
    at Object../app/javascript/stylesheets/application.scss (application.scss:2)
    at __webpack_require__ (bootstrap:63)
    at Module.<anonymous> (application.js:1)
    at Module../app/javascript/packs/application.js (application.js:21)
    at __webpack_require__ (bootstrap:63)
    at bootstrap:198
    at bootstrap:198
./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss @ index.js:34
__webpack_require__ @ bootstrap:63
./app/javascript/stylesheets/application.scss @ application.scss:2
__webpack_require__ @ bootstrap:63
(anonymous) @ application.js:1
./app/javascript/packs/application.js @ application.js:21
__webpack_require__ @ bootstrap:63
(anonymous) @ bootstrap:198
(anonymous) @ bootstrap:198

Uncaught ReferenceError: jQuery is not defined
    at jquery.inputmask.bundle.js:1554

当我运行 Rails 6 应用程序时，应用程序在不加载 CSS 的情况下启动。上面的错误是从 JS 控制台复制的。

package.json看起来像这样：

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@hotwired/turbo-rails": "^7.0.0-beta.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "autoprefixer": "^9",
    "el-transition": "^0.0.7",
    "google-maps": "^4.3.3",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.12.1",
    "postcss": "^7",
    "stimulus": "^2.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

这是app/javascript/pack/application.js：

import Rails from "@rails/ujs";
import "@hotwired/turbo-rails";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
import "controllers";

Rails.start();
ActiveStorage.start();

import "stylesheets/application.scss";

var jQuery = require('jquery')
global.$('.div')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

节点版本：

node-v
v14.18.1

锁定版本：

Webpacker (`@rails/webpacker`): 5.2.1
`css-loader` is not in `package-lock.json`, but in `yarn.lock` is `css-loader "^3.5.3"`
`style-loader` is "^1.2.1"
`"sass-loader"` is  "^8.0.2"

它逐渐让我发疯。我尝试了不同版本的软件包，不同的设置，但是，似乎没有任何效果。

知道如何解决这个问题吗？

标签： javascriptruby-on-railswebpack

解决方案

推荐阅读