'VueJS and FontAwesome Import - Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core'
Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in '/project/src/plugins'
Been trying to follow up this tutorial (https://blog.logrocket.com/full-guide-to-using-font-awesome-icons-in-vue-js-apps-5574c74d9b2d/) to upgrade my current fontawesome (4.0.7) to the newest 5.0.12 version on my project, but keep getting this error, that is pretty clear that the project is not finding the lib.
I used
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome
src/plugins/font-awesome.js
import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faCoffee)
Vue.component('font-awesome-icon', FontAwesomeIcon)
main.js
/* ============
* Main File
* ============
*
* Will initialize the application.
*/
import Vue from 'vue';
/* ============
* Plugins
* ============
*
* Import and bootstrap the plugins.
*/
import './plugins/vuex';
import './plugins/axios';
import { i18n } from './plugins/vue-i18n';
import { router } from './plugins/vue-router';
import './plugins/vuex-router-sync';
import './plugins/bootstrap';
import './plugins/font-awesome';
import './plugins/moment';
import './plugins/vuelidate';
import './plugins/scrollto';
import './plugins/filters';
import './plugins/casl';
// Theme css imports
import './assets/css/application.scss';
/* ============
* Main App
* ============
*
* Last but not least, we import the main application.
*/
import App from './App.vue';
import store from './store';
Vue.config.productionTip = false;
store.dispatch('auth/check');
/* eslint-disable no-new */
new Vue({
/**
* Bind the Vue instance to the HTML.
*/
el: '#app',
/**
* The localization plugin.
*/
i18n,
/**
* The router.
*/
router,
/**
* The Vuex store.
*/
store,
/**
* Will render the application.
*
* @param {Function} h Will create an element.
*/
render: h => h(App),
});
Other plugins are working fine, and the folder actually exists on node_modules. Any other approach I should try to solve this?
Solution 1:[1]
i had a same problem
webpack css-loader not support (scss and .css bundling) you need sass to do
just install sass-loader and node-sass(read below note)
npm install -D sass-loader node-sass<----------------see below note before install--------------
webpack
module.exports = {
module: {
rules: [
{
test: /\.(sass|scss|css)$/,<-----------------------note placed scss /css---------
use: [
'vue-style-loader',
'css-loader',
'sass-loader'<--------------------this is you need----------------
]
}
]
},
// plugin omitted
}
Note: People make mistake while install npm install -d sass-loader
however sass-loader brings latest version of sass means you get sass-loader:11.0.0 or above so webpack 4 does not support latest sass-loader.sass loader more than version 11 above for webpack 5.
solutions
your webpack version is 4 so you just need below sass loader version 10
npm install -D node-sass
npm install -D sass-loader@^10 <-----------importent step
my webpack
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
module.exports = {
entry: './src/main.js',
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.(sass|scss|css)$/,
use: ['vue-style-loader', 'css-loader','sass-loader'],
},
]
},
devServer: {
open: true,
hot: true
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
}
Solution 2:[2]
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
this worked for me
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | ßãlãjî |
Solution 2 | Swarup Suryawanshi |