現在Docker + Rails 環境でアプリを作成しています。
select2を使用してajaxでselectboxを使用したajax検索を実装しています。
以前までは問題なく動作していたのですが、yarnのパッケージを更新してから、select2が使用できなくなりました。
調べてみると
【Nuxt.js】Sassのバージョンに注意!|aLiz|noteと同じような内容のエラーだと思ったので、各packageをバージョン指定したりして試してみましたが、エラー、動作ともに変わりません(m_ m)
もしわかる方がいらっしゃればご教授いただきますようよろしくお願いいたします(m _m)
フロント側に関しては初心者であるため解決に必要な知識、該当ファアイルがわからないため、アドバイスいただければ追記しますのでよろしくお願いいたします。
動作環境
Ruby: 2.7
Rails: 6.0.3.6
webpacker: rails/webpacker@5.4.0(webpack@4.46.0)
yarn: 1.22.5
エラー内容
terminal上でのエラー
terminal
1ERROR in ./node_modules/select2/dist/css/select2.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/select2/dist/css/select2.css) 2Module build failed (from ./node_modules/css-loader/dist/cjs.js): 3TypeError: this.getOptions is not a function 4 at Object.loader (/webapp/node_modules/css-loader/dist/index.js:31:27) 5 @ ./node_modules/select2/dist/css/select2.css 2:26-141 6 @ ./app/javascript/packs/manageownfoodstuffs.js 7 8ERROR in ./node_modules/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css) 9Module build failed (from ./node_modules/css-loader/dist/cjs.js): 10TypeError: this.getOptions is not a function 11 at Object.loader (/webapp/node_modules/css-loader/dist/index.js:31:27) 12 @ ./node_modules/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css 2:26-156 13 @ ./app/javascript/packs/manageownfoodstuffs.js
Chromeのconsole上でのエラー
DevTools failed to load source map: Could not load content for chrome-extension://nmibbjghlmdiafjolcphdggihcbcedmg/js.3bd8b779.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME select2-bootstrap4.min.css:19 Uncaught Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (:3000/webapp/node_modules/postcss-loader/dist/index.js:40) at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/dist/cjs.js?!./node_modules/select2/dist/css/select2.css (select2-bootstrap4.min.css:19) at __webpack_require__ (bootstrap:19) at Object../node_modules/select2/dist/css/select2.css (select2.css:2) at __webpack_require__ (bootstrap:19) at Module.<anonymous> (stocks.js:1) at Module../app/javascript/packs/stocks.js (stocks.js:66) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83 ./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/dist/cjs.js?!./node_modules/select2/dist/css/select2.css @ select2-bootstrap4.min.css:19 __webpack_require__ @ bootstrap:19 ./node_modules/select2/dist/css/select2.css @ select2.css:2 __webpack_require__ @ bootstrap:19 (anonymous) @ stocks.js:1 ./app/javascript/packs/stocks.js @ stocks.js:66 __webpack_require__ @ bootstrap:19 (anonymous) @ bootstrap:83 (anonymous) @ bootstrap:83
期待する動作
- select2が動作するようになること
- chromeのconsole上で上記のエラーがなくなること
試したこと
【Nuxt.js】Sassのバージョンに注意!|aLiz|noteを参考にしてterminalにて以下を実行しましたが変化はありませんでした。
docker-compose run --rm web yarn add node-sass@4 css-loader postcss-loader sass-loader@10
該当しそうなコード
package.json
json
1{ 2 "private": true, 3 "dependencies": { 4 "@fortawesome/fontawesome-free": "^5.13.1", 5 "@rails/webpacker": "^5.4.0", 6 "@ttskch/select2-bootstrap4-theme": "1.3.4", 7 "admin-lte": "^3.1", 8 "bootstrap": "^4.5.0", 9 "css-loader": "^6.2.0", 10 "data-confirm-modal": "^1.6.2", 11 "jquery": "^3.5.1", 12 "jquery-ui": "^1.12.1", 13 "node-sass": "^4", 14 "popper.js": "^1.16.1", 15 "postcss-loader": "6", 16 "rails-ujs": "^5.2.4-3", 17 "sass-loader": "^10.1.1", 18 "select2": "4.0.13", 19 "sortablejs": "1.10.2", 20 "swiper": "<6" 21 }, 22 "name": "webapp", 23 "version": "1.0.0", 24 "main": "index.js", 25 "repository": "https://github.com/toshi-ue/app_for_job_change.git", 26 "license": "MIT", 27 "devDependencies": { 28 "webpack-dev-server": "^3.11.2" 29 } 30}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。