Module not found: Error: Can't resolve 'font-awesome'
Have you tried npm install --save font-awesome
?
(Then npm install
or yarn install
?)
codeRamen
Updated on June 22, 2022Comments
-
codeRamen almost 2 years
ERROR in multi axios font-awesome history material-ui prop-types react react-bootstrap react-dom react-foundation react-redux react-router react-router-dom recharts redux redux-saga Module not found: Error: Can't resolve 'font-awesome' in '/Users/user/Documents/psbank/pslite_web' @ multi axios font-awesome history material-ui prop-types react react-bootstrap react-dom react-foundation react-redux react-router react-router-dom recharts redux redux-saga
.webpack.config.js:
const webpack = require("webpack"); const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const VENDOR_LIBS = [ 'axios', 'font-awesome', 'history', 'material-ui', 'prop-types', 'react', 'react-bootstrap', 'react-dom', 'react-foundation', 'react-redux', 'react-router', 'react-router-dom', 'recharts', 'redux', 'redux-saga' ]; module.exports = { entry: { bundle: ["babel-polyfill", "./src/index.js"], vendors: VENDOR_LIBS }, output: { path: path.resolve(__dirname, "dist"), filename: "[name].[chunkhash].js", publicPath: "./" }, module: { rules: [ { test: /\.jsx?$/, loader: "babel-loader", query: { compact: false } }, { loader: ['style-loader','css-loader'], test: /\.css$/ }, { test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: [ { loader: "file-loader", options: { name: "[name].[ext]", outputPath: 'fonts/' } } ] } ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ names: [ 'vendors', 'manifest' ] }), new HtmlWebpackPlugin({ template: "public/index.html" }) ] };
index.js:
import React from 'react'; import ReactDOM from 'react-dom'; import { createStore , applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga' import { Provider } from 'react-redux' import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import './index.css'; import "font-awesome/css/font-awesome.css"; import MainComponent from './pages/main/main.component'; import reducers from './_redux'; import reduxSaga from './_reduxSaga'; import registerServiceWorker from './registerServiceWorker'; const sagaMiddleware = createSagaMiddleware(); let store = createStore( reducers , applyMiddleware( sagaMiddleware ) ); sagaMiddleware.run( reduxSaga ); const Container = () => ( // <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)} > <Provider store={ store } > <MuiThemeProvider> <MainComponent /> </MuiThemeProvider> </Provider> ); ReactDOM.render( <Container /> , document.getElementById( 'root' ) ); package.json: { "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.16.2", "font-awesome": "^4.7.0", "history": "^4.7.2", "material-ui": "^0.19.2", "prop-types": "^15.6.0", "react": "^15.6.1", "react-bootstrap": "^0.31.3", "react-dom": "^15.6.1", "react-foundation": "^0.9.2", "react-redux": "^5.0.6", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", "recharts": "^1.0.0-alpha.6", "redux": "^3.7.2", "redux-saga": "^0.15.6" },
I have hunt the web everywhere from tutorials to possible solutions for nearly 2 days. From installing to narrowing down from the beginning for modifying an existing project. All of which I have done.
Appreciate for your help and expertise.