Module not found: Error: Can't resolve './@fortawesome/fontawesome-free/css/fontawesome.css'
14,804
It's a bit late, but maybe it helps someone:
I think instead of
@import "@fortawesome/fontawesome-free/css/fontawesome.css";
it should be
@import '~@fortawesome/fontawesome-free/css/fontawesome.css';
Author by
softshipper
Updated on June 05, 2022Comments
-
softshipper almost 2 years
I am trying to use font-awesome 5.1.0 in webpack 4. The content of the webpack configuration file:
const HtmlWebPackPlugin = require("html-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const path = require("path"); const autoprefixer = require('autoprefixer'); module.exports = { entry: ["./src/index.js", "./src/index.scss", "react-hot-loader/patch"], output: { path: path.resolve(__dirname, "dist"), filename: "bundle.[hash].js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"] } } }, { test: /\.html$/, use: [ { loader: "html-loader", options: { minimize: true } } ] }, { test: /\.(sass|scss)$/, use: [ { loader: "file-loader", options: { name: "bundle.css" } }, { loader: "extract-loader" }, { loader: "css-loader" }, { loader: "postcss-loader", options: { plugins: () => [autoprefixer({ grid: false })] } }, { loader: "sass-loader", options: { includePaths: ["./node_modules"] } } ] }, { test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: "file-loader", options: { name: "[name][hash].[ext]", outputPath: "fonts/" } } ] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./public/index.html", filename: "./index.html" }), new CopyWebpackPlugin([ { from: "public" } ]) ] };
In the index.scss file:
@import "@fortawesome/fontawesome-free/css/fontawesome.css"; @import "@material/button/mdc-button.scss"; @import "@material/drawer/mdc-drawer.scss"; @import "@material/top-app-bar/mdc-top-app-bar.scss"; @import "@material/list/mdc-list.scss"; @import "./App/scss/app.scss"; * { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } #root { display: flex; flex-direction: row; box-sizing: border-box; height: 100%; width: 100%; }
As you can on the picture:
Font-awesome is imported from the right place but I've got compiler error:
ERROR in ./src/index.scss Module not found: Error: Can't resolve './@fortawesome/fontawesome-free/css/fontawesome.css' in '/home/developer/Desktop/reasonreact/cockpit/src' @ ./src/index.scss @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/index.js ./src/index.scss react-hot-loader/patch
What am I doing wrong?
Update
I changed webconfig to:
{ test: /\.(sass|scss)$/, use: [ { loader: "file-loader", options: { name: "bundle.css" } }, { loader: "extract-loader" }, { loader: "css-loader" }, { loader: "postcss-loader", options: { plugins: () => [autoprefixer({ grid: false })] } }, { loader: "sass-loader", options: { includePaths: ["./node_modules", "src", "."] } } ] },
and I've got the following error:
ERROR in ./src/index.scss Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js): NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: require is not defined at runLoaders (/home/developer/Desktop/reason-react/cockpit/node_modules/webpack/lib/NormalModule.js:300:13) at /home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:364:11 at /home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:230:18 at context.callback (/home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at process._tickCallback (internal/process/next_tick.js:68:7) @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/index.js ./src/index.scss react-hot-loader/patch
-
softshipper almost 6 yearsThere is no typo error. Look at the folder structure please.