前提・実現したいこと・エラーメッセージ
onsenuiを導入したvueを開発しようとしています。
ローカルでの動作を確認後、rails + vue の環境をEC2にデプロイしようとしていますが、bin/webpackを実行すると下記のエラーが発生してコンパイルがうまく行きません。
ERROR in ./node_modules/onsenui/css/onsenui.css Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/Material-Design-Iconic-Font.ttf' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/Material-Design-Iconic-Font.ttf' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
上記と同類のfontsの読み込みエラーが大量に発生します。
原因の推測
現状、原因の考察としてはrailsで入れたwebpackの設定を特に触っておらず、css-loader,postcss-loaderの挙動がonsenuiと合っていないのかなと考えています。
また、そもそもwebpackとassets:precompileが干渉しているのかとも思っています。
開発手順とフォルダ構成
開発手順としては
1 rails new --webpackで初期ファイル生成
2 app/javascript/packs配下にvueファイルを作成
3 webpack-dev-serverで開発→動作確認・・・※ここでも上記onsenuiのエラーが出てましたが後述の方法で暫定対処(試したことに記載)
4 ec2にクローン
5 bin/webpackを実行
フォルダ構成・ファイル状況としては下記の通りです。
pwa_app ∟app ∟assets ∟config ∟images ∟javascripts ∟application.js・・・④rails newで生成 ∟manifest.json.erb ∟serviceworker-companion.js ∟serviceworker.js.erb ∟stylesheets ∟application.css・・・⑤rails newで生成 ∟custom.scss・・・全体に関連するスタイルはここに記述 ∟channels ∟controllers ∟helpers ∟javascript ∟packs ∟components・・・vueの単一コンポーネントをまとめてます ∟main.js・・・③ ∟plugins ∟router ∟store ∟stylesheets・・・単一コンポーネント内で使うscssをまとめたフォルダ ∟global.scss・・・下記の2つを読み込む ∟_mixin.scss・・・mixinを記載 ∟_variables.scss・・・変数を記載 ∟jobs ∟mailers ∟models ∟uploaders ∟views ∟layouts ∟application.html.erb・・・① ∟staticpages ∟index.html.erb・・・②
node_modules配下の関連しそうなファイルを抜粋
node_modules ∟@rails ∟webpacker ∟package ∟index.js ∟config.js ∟onsenui ∟css ∟onsenui.css・・・⑥ ∟font_awesome ∟css ∟fonts ∟各種フォントファイル ∟ionicons ∟css ∟fonts ∟各種フォントファイル ∟material-design-iconic-font ∟css ∟fonts ∟各種フォントファイル
関連するソースコード
①application.html.erb
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>PwaApp <%= ENV["VAPID_PUBLIC_KEY"] %></title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 11 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> 12 <link rel="manifest" href="/manifest.json" /> 13 <meta name="apple-mobile-web-app-capable" content="yes"> 14 <script packs="https://yubinbango.github.io/yubinbango-core/yubinbango-core.js" charset="UTF-8"></script> 15 </head> 16 17 <body> 18 <%= yield %> 19 </body> 20</html> 21
②index.html.erb
html
1<div id="app"> 2</div> 3<%= javascript_pack_tag 'main' %> 4<%= stylesheet_pack_tag 'main' %> 5
③main.js
js
1import Vue from 'vue/dist/vue.esm.js'; 2import Vuex from 'vuex'; 3import App from './components/app.vue' 4import store from './store/store.js' 5import VueRouter from 'vue-router'; 6import Router from './router/router.js' 7import "babel-polyfill" 8Vue.use(Vuex); 9Vue.use(VueRouter); 10 11import axios from 'axios' 12import { csrfToken } from 'rails-ujs' 13import AxiosCsrfPlugin from './plugins/axios-csrf' 14 15Vue.use(AxiosCsrfPlugin, { axios: axios, csrfToken: csrfToken}) 16 17import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css' 18import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css' 19import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css' 20import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css' 21 22import 'onsenui/css/onsenui.css';//bin/webpackはここで引っかかっている 23import 'onsenui/css/onsen-css-components.css'; 24import VueOnsen from 'vue-onsenui'; 25Vue.use(VueOnsen); 26 27import VueQrcodeReader from 'vue-qrcode-reader' 28 29Vue.use(VueQrcodeReader) 30 31 32document.addEventListener('DOMContentLoaded', () => { 33 var app = new Vue({ 34 el: '#app', 35 store, 36 router: Router, 37 render: (h) => h(App), 38 }); 39}); 40 41Router.beforeEach((to, from, next) => { 42 if (to.matched.some(record => record.meta.requiresAuth)){ 43 if (false) { 44 next({ 45 path: '/login', 46 query: { redirect: to.fullPath} 47 }) 48 } else { 49 next() 50 } 51 } else { 52 next() 53 } 54}) 55 56if (navigator.serviceWorker) { 57 navigator.serviceWorker.register('/serviceworker.js', { scope: './' }) 58 .then(function(swReg) { 59 console.log('Service Worker is registered', swReg); 60 }) 61 .catch(function(error) { 62 console.error('Service Worker Error', error); 63 }); 64} else { 65 console.warn('Push messaging is not supported'); 66} 67
④application.css
css
1/* 2 * This is a manifest file that'll be compiled into application.css, which will include all the files 3 * listed below. 4 * 5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 6 * vendor/assets/stylesheets directory can be referenced here using a relative path. 7 * 8 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 9 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 10 * files in this directory. Styles in this file should be added after the last require_* statement. 11 * It is generally better to create a new file per style scope. 12 * 13 *= require_materialize 14 *= require_tree . 15 *= require_self 16 */ 17
⑤application.js
js
1// This is a manifest file that'll be compiled into application.js, which will include all the files 2// listed below. 3// 4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 5// vendor/assets/javascripts directory can be referenced here using a relative path. 6// 7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8// compiled file. JavaScript code in this file should be added after the last require_* statement. 9// 10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11// about supported directives. 12// 13//= require jquery3 14//= require jquery.turbolinks 15//= require rails-ujs 16//= require activestorage 17//= require turbolinks 18//= require_tree . 19//= require serviceworker-companion
⑥node_modules/onsenui/css/onsenui.css
css
1/*! onsenui - v2.10.4 - 2018-07-20 */ 2@import url("./ionicons/css/ionicons.min.css"); 3@import url("./material-design-iconic-font/css/material-design-iconic-font.min.css"); 4@import url("./font_awesome/css/font-awesome.min.css"); 5 6~以下スタイルの記述なので省略~
試したこと
開発環境でも起きていた問題ですが、onsenuiのフォルダを下記の構成にしてエラー回避していました。
node_modules ∟onsenui ∟fonts//追加 ∟font_awesome,ionicons,material-design-iconic-fontの各フォントファイル ∟css ∟onsenui.css ∟font_awesome ∟css ∟fonts ∟各種フォントファイル ∟ionicons ∟css ∟fonts ∟各種フォントファイル ∟material-design-iconic-font ∟css ∟fonts ∟各種フォントファイル
上記の状態でコンパイルすると、bin/webpackが通ります。
その後、assets:precompileをするとコンパイルは可能です。
ですが、その後オンラインで状況を確認するとUncaught Error: Cannot find module "onsenui/css/onsenui.css"となるため、根本的な解決になっていないと考えています。
補足情報(FW/ツールのバージョンなど)
rails 5.2.0
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。