What is preventing this rails/vue project from deploying to heroku?

Question

I'm developing a rails/vue application that hasn't been decoupled yet and I'm trying to deploy it to heroku but it keeps failing when heroku tries to compile it. It works fine locally. The error I get is:

remote: Compilation failed: remote: ModuleNotFoundError: Module not found: Error: Can't resolve './material-design-icons-iconfont/dist/material-design-icons.css' in '/tmp/build_f1193978/app/javascript/packs'

remote: resolve './material-design-icons-iconfont/dist/material-design-icons.css' in '/tmp/build_f1193978/app/javascript/packs' remote: using description file: /tmp/build_f1193978/package.json (relative path: ./app/javascript/packs) remote: Field 'browser' doesn't contain a valid alias configuration remote: using description file: /tmp/build_f1193978/package.json (relative path: ./app/javascript/packs/material-design-icons-iconfont/dist/material-design-icons.css) remote: no extension remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_f1193978/app/javascript/packs/material-design-icons-iconfont/dist/material-design-icons.css doesn't exist remote: .vue

After doing some research, I found one answer that looks promising, but I'm not sure how to use it within my rails project, because I don't know where their answer ought to be applied. I'm importing it like so in main.js in the vue portion of the application:

import Vue from 'vue' import Vuetify from 'vuetify' import VueRouter from 'vue-router' import 'vuetify/dist/vuetify.min.css' import App from '../app.vue' import Axios from 'axios' import VueAxios from 'vue-axios' import Vuex from 'vuex'

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader import './material-design-icons-iconfont/dist/material-design-icons.css'

I've tried including the module in dependencies as opposed to just devdependencies, I've also had heroku skip pruning of said devdependecies, but neither solution worked. Based on this, my understanding of the problem is that heroku can't find the module, because of relative pathing, but how do I circumvent this? Is there a simple way to switch this particular import to absolute pathing without effecting others and, while where there, why doesn't this effect the other imports

Dmitrii Kharlamov Dmitrii Kharlamov · Accepted Answer · 2021-01-11T22:42:57

Judging by the relative path here: ./material-design-icons-iconfont/dist/material-design-icons.css you're using a downloaded package for that file, and I doubt it's committed to your repository.

If you want to use the material-design-icons-iconfont, you should do so according to its documentation:

npm install material-design-icons-iconfont --save - in your project directory

Then create a folder named stylesheets inside your app/javascript folder, and add a file called application.scss there.

Add these lines inside this file:

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
 
@import '~material-design-icons-iconfont/src/material-design-icons';

More information: https://www.npmjs.com/package/material-design-icons-iconfont

I also encourage you to read Getting Started on Heroku with Rails 6.x to get a better understanding of the platform and how it interacts with Rails.

What is preventing this rails/vue project from deploying to heroku?

1 Answers