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

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

ただいまの
回答率

89.98%

onsenuiを導入したvue + rails環境でwebpackのコンパイルエラー

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,224

ys3128

score 19

 前提・実現したいこと・エラーメッセージ

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_appappassetsconfigimagesjavascriptsapplication.js・・・④rails newで生成
         ∟manifest.json.erbserviceworker-companion.jsserviceworker.js.erbstylesheetsapplication.css・・・⑤rails newで生成
         ∟custom.scss・・・全体に関連するスタイルはここに記述
     ∟channelscontrollershelpersjavascriptpackscomponents・・・vueの単一コンポーネントをまとめてます
         ∟main.js・・・③
         ∟pluginsrouterstorestylesheets・・・単一コンポーネント内で使うscssをまとめたフォルダ
           ∟global.scss・・・下記の2つを読み込む
           ∟_mixin.scss・・・mixinを記載
           ∟_variables.scss・・・変数を記載
     ∟jobsmailersmodelsuploadersviewslayoutsapplication.html.erb・・・①
       ∟staticpagesindex.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

<!DOCTYPE html>
<html>
  <head>
    <title>PwaApp <%= ENV["VAPID_PUBLIC_KEY"] %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <link rel="manifest" href="/manifest.json" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script packs="https://yubinbango.github.io/yubinbango-core/yubinbango-core.js" charset="UTF-8"></script>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

②index.html.erb

<div id="app">
</div>
<%= javascript_pack_tag 'main' %>
<%= stylesheet_pack_tag 'main' %>

③main.js

import Vue from 'vue/dist/vue.esm.js';
import Vuex from 'vuex';
import App from './components/app.vue'
import store from './store/store.js'
import VueRouter from 'vue-router';
import Router from './router/router.js'
import "babel-polyfill"
Vue.use(Vuex);
Vue.use(VueRouter);

import axios from 'axios'
import { csrfToken } from 'rails-ujs'
import AxiosCsrfPlugin from './plugins/axios-csrf'

Vue.use(AxiosCsrfPlugin, { axios: axios, csrfToken: csrfToken})

import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css'
import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'
import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css'

import 'onsenui/css/onsenui.css';//bin/webpackはここで引っかかっている
import 'onsenui/css/onsen-css-components.css';
import VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);

import VueQrcodeReader from 'vue-qrcode-reader'

Vue.use(VueQrcodeReader)


document.addEventListener('DOMContentLoaded', () => {
    var app = new Vue({
        el: '#app',
        store,
        router: Router,
        render: (h) => h(App),
    });
});

Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)){
        if (false) {
            next({
                path: '/login',
                query: { redirect: to.fullPath}
            })
        } else {
            next()
        }
    } else {
        next()
    }
})

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/serviceworker.js', { scope: './' })
    .then(function(swReg) {
        console.log('Service Worker is registered', swReg);
    })
    .catch(function(error) {
      console.error('Service Worker Error', error);
    });
} else {
  console.warn('Push messaging is not supported');
}


④application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_materialize
 *= require_tree .
 *= require_self
 */


⑤application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require jquery.turbolinks
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require serviceworker-companion


⑥node_modules/onsenui/css/onsenui.css

/*! onsenui - v2.10.4 - 2018-07-20 */
@import url("./ionicons/css/ionicons.min.css");
@import url("./material-design-iconic-font/css/material-design-iconic-font.min.css");
@import url("./font_awesome/css/font-awesome.min.css");

~以下スタイルの記述なので省略~

 試したこと

開発環境でも起きていた問題ですが、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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

現状、とりあえずコンパイルだけ通す方法はみつかった次第です。
onsenui.cssの下記のimport部分を修正しました。

//onsenui.css(変更前)
@import url("./ionicons/css/ionicons.min.css");
@import url("./material-design-iconic-font/css/material-design-iconic-font.min.css");
@import url("./font_awesome/css/font-awesome.min.css");
//onsenui.css(変更後)
@import "~onsenui/css/ionicons/css/ionicons";
@import "~onsenui/css/material-design-iconic-font/css/material-design-iconic-font";
@import "~onsenui/css/font_awesome/css/font-awesome";


いちおうこれで通ってはいますが、iconを読み込めなかったりしてます。そこはfont-awesomeを直接当てて対処してるので、上記のiconが読めないことに関しても無視はできますが、完全に機能しているわけではなさそうです。

正式な対応方法が知りたいところです、、、。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

これ ttf-loader 入れてありますか?

 追記

ちょっとソース追ってみたんですが、
url('../fonts/Material-Design-Iconic-Font.ttf')
こういう書き方してありますね。
これ、確かwebpackが見てるルートパスから見た相対パスとして解釈されるとかだった記憶が。

解決方法があったかどうか…ちょっと覚えてません。
url-loaderとかでどうにかなったような気もしないでもないですが、お役に立てずすみません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/27 11:55

    ご回答ありがとうございます。

    確認したところ、ttf-loaderは入っていました。
    loader系はnode_modules配下を検索したところ下記の内容が入っています。
    ・babel-loader
    ・css-loader
    ・file-loader
    ・json-loader
    ・postcss-loader
    ・sass-loader
    ・vue-loader
    ・style-loader
    ・ttf-loader

    また、省略したことで分かりづらくしてしまい申し訳ありませんでしたが、ttf以外にもwoff,eot,svgの読み込みエラーが発生しており、特定のファイル形式が読み込めない、という感じではないのかな?と考えております。

    上記の質問以外で書かれているエラー
    ```
    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'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:55427-55478
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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.woff' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:55338-55390
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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.woff2' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:55247-55300
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/fontawesome-webfont.eot' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131270-131313
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/fontawesome-webfont.eot?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131193-131244
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/fontawesome-webfont.svg?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131650-131701
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/fontawesome-webfont.ttf?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131558-131609
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/fontawesome-webfont.woff2?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131378-131431
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/fontawesome-webfont.woff?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131469-131521
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/ionicons.eot' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:611-643 7:669-701
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/ionicons.svg' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:900-932
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/ionicons.ttf' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:753-785
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue

    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/ionicons.woff' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
    @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:828-861
    @ ./node_modules/onsenui/css/onsenui.css
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue
    @ ./app/javascript/packs/components/app.vue
    ```

    キャンセル

  • 2018/09/27 12:33

    追記ありがとうございます!

    なるほど。
    確かにwebpackからの相対パスと捉える形になるのであれば読み込みはできなさそうですね、、、。
    url-loaderを一度調べてみます。ご意見ありがとうございます!

    キャンセル

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

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる