Блог

Главная - Вопросы по программированию - Rails 6 webpack: ошибка типа: this.GetOptions не является функцией

Rails 6 webpack: ошибка типа: this.GetOptions не является функцией

#javascript #ruby-on-rails #webpack

Вопрос:

Я весь день борюсь с этой ошибкой:

 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"

Это постепенно сводит меня с ума. Я пробовал разные версии пакетов, разные настройки, однако, похоже, ничего не работает.

Есть идеи, как решить эту проблему?

Комментарии:

1. Для чего предназначена заблокированная версия webpack , css-loader , style-loader amp; sass-loader ?

2. Я помню, что у меня возникли некоторые проблемы, когда я настроил webpacker для извлечения css, и проблема заключалась в версии загрузчика sass, которую я использовал.

3. @the_spectator здравствуйте — я только что добавил версии в ОП. Спасибо

4. @razvans здравствуйте — пожалуйста, смотрите ОП, я добавил версию. Спасибо

5. @user984621 Существует несовместимость между css-loader 3 и webpack 4 (зависимость от @rails/webpacker ). Пожалуйста, попробуйте заблокировать css-loader 2.1.1 и посмотрите, поможет ли это.

Метки: