質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

976閲覧

swiper導入後、webpacker-dev-seaverが起動しない

ik_ko

総合スコア9

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2021/06/09 05:32

編集2021/06/09 05:33

環境

rails6系
ruby 2.6.5
docker
docker-compose
webpack
#聞きたいこと
railsで開発中、swiperを導入するため、以下の記事を参考に
rails swiperの導入方法

npm install swiper

npmでインストールして導入したのですが、 その後webpack-dev-seaverを起動するとエラーが発生してしまい、動かない状況にあります。
何かアドバイス頂ければと思っております。

#ツリー構造
root
|---app---javascript---packs---application.js
| |
| |---stylesheets---application.scss
|
|---node_modules---swiper-bundle.min.js
|
|---swiper-bundle.min.scss

エラー文

root@f92030f7e7e6:/app# bin/webpack-dev-server internal/modules/cjs/loader.js:888 throw err; ^ Error: Cannot find module 'sass' Require stack: - /app/config/webpack/environment.js - /app/config/webpack/development.js - /app/node_modules/webpack-cli/bin/utils/convert-argv.js - /app/node_modules/webpack-dev-server/bin/webpack-dev-server.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15) at Function.Module._load (internal/modules/cjs/loader.js:730:27) at Module.require (internal/modules/cjs/loader.js:957:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.<anonymous> (/sdf-app/config/webpack/environment.js:16:45) at Module._compile (internal/modules/cjs/loader.js:1068:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10) at Module.load (internal/modules/cjs/loader.js:933:32) at Function.Module._load (internal/modules/cjs/loader.js:774:14) at Module.require (internal/modules/cjs/loader.js:957:19) { code: 'MODULE_NOT_FOUND', requireStack: [ '/app/config/webpack/environment.js', '/app/config/webpack/development.js', '/app/node_modules/webpack-cli/bin/utils/convert-argv.js', '/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js' ] }

#各種ファイル
application.js

//= require ../../../node_modules/swiper/swiper-bundle.js

application.scss

@import '../../../node_modules/swiper/swiper-bundle';

package.json

{ "name": "sdf_app", "private": true, "dependencies": { "@fortawesome/fontawesome-free": "^5.15.2", "@rails/actioncable": "^6.0.0", "@rails/actiontext": "^6.0.3-4", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.3.0", "axios": "^0.21.1", "bootstrap": "^4.5.3", "bootstrap-material-design": "^4.1.3", "fiber": "^1.0.4", "jquery": "^3.5.1", "node-sass": "^5.0.0", "popper.js": "^1.16.1", "rails-ujs": "^5.2.4-4", "sass": "^1.32.8", "swiper": "^6.7.0", "trix": "^1.2.0", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.2" } }

エラー文はファイルが見つからない時に発生するエラーだというのは検索して理解できましたが、パスの指定は間違っていないと思うのですが、他に原因となる箇所はどこなのでしょうか?
アドバイス頂ければ嬉しいです。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

npm cache clear --force
yean cache clear --force
npm install sass

上位のコマンドを行ったところ解決できました

投稿2021/06/09 12:57

ik_ko

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問