This question has been answered in multiple questions before, but I'm afraid none of them work for me.
I'm using font-awesome from node_modules
all I wanna do is this
import 'font-awesome/css/font-awesome.css'
Here's my Webpack Code
webpackConfig.module.rules.push(
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
)
The error, Please note I am getting the same error for all the different fonts in font-awesome
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: /Users/valoster/Projects/app-ui/node_modules/url-loader/index.js?limit=10000&mimetype=application/font-woff!/Users/valoster/Projects/app-ui/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Unexpected token (1:15)
You may need an appropriate loader to handle this file type.
| export default = __webpack_public_path__ + "af7ae505a9eed503f8b8e6982036873e.woff2";
# ./node_modules/css-loader?{"sourceMap":true,"minimize":true}!./node_modules/postcss-loader/lib?{"plugins":[{"version":"5.2.17","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"cssnano","postcssVersion":"5.2.17"}]}!./node_modules/font-awesome/css/font-awesome.css 6:244-297
# ./node_modules/font-awesome/css/font-awesome.css
You are trying to import a .css file, so you need to use css-loader.
Command Line:
yarn add css-loader --dev
In your webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
},
Related
I'm trying to build with webpack
npm run build
But I get the following error
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
#charset "UTF-8";/*!
| * Bootstrap v5.0.2 (https://getbootstrap.com/)
| * Copyright 2011-2021 The Bootstrap Authors
My webpack config looks like this
const path = require("path");
module.exports = {
mode: "production",
entry: "./paginate.js",
output: {
path: path.resolve("./"),
filename: "index.js",
libraryTarget: "commonjs2",
},
module: {
rules: [
{
test: /\.js|jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
}
],
},
externals: {
react: "react",
},
};
.babelrc file looks like
{
"presets": ["#babel/preset-env", ["#babel/preset-react", {
"runtime": "automatic"
}]]
}
I've searched but can't seem to find the right loader for this.
I'm not sure, just a guess, most likely bootstrap is trying to import CSS or scss and you don't have a loader for it defined.
Try adding:
{
test: /\.s?[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: [/node_modules/],
},
To your webpack rules and also install those modules with --save-dev.
Side node, this regular exression test: /\.js|jsx?$/, is incorrect, just use test: /\.jsx?$/,. The "?" means the x is optional.
When i tried run a cypress test that use a react-phone-number-input a webpack error appears, this error only appears in cypress, my react project don't show this error and works fine, is there a solution in webpack or cypress that can remove this error?
Error: Webpack Compilation Error
./node_modules/react-phone-number-input/style.css 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* CSS variables. */
> :root {
| --PhoneInputCountrySelect-marginRight: 0.35em;
| --PhoneInputCountrySelectArrow-width: 0.3em;
# ./src/components/InputPhoneNumber/index.js 15:0-44
# ./src/components/SignUpForm/index.js
# ./src/components/ProductForm/index.js
# ./src/tests/ProductForm.spec.js
My Webpack config is this
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'public' }
]
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'style-loader' // inject CSS to page
},
{
loader: 'css-loader' // translates CSS into CommonJS modules
},
{
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
]
}
}
},
{
loader: 'sass-loader' // compiles Sass to CSS
}
]
}
]
}
}
The css-loader doesn’t compile css root parameters.
This answer will help you solve the problem
https://github.com/webpack-contrib/css-loader/issues/69#issuecomment-108597013
I m trying to add font-awesome to my React-redux project. I got the same error as in the link: Webpack problems importing font-awesome library. But modifying webpack.config.js didnt help. Now my webpack.config.js now looks like:
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'url-loader?limit=10000'
}, { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
]}
And the error that I m getting is:
at Parser.pp$3.parseExprSubscripts (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
Module not found: Error: Cannot resolve module 'file' in <project>\node_modules\font-awesome\css
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:312-355
ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/font-woff didn't return a function
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:412-465
ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/font-woff didn't return a function
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:495-547
ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/octet-stream didn't return a function
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:576-627
ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=image/svg+xml didn't return a function
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:660-711
Try adding -loader to all of your loaders: file-loader, url-loader etc. Since webpack 2 it is required to add the -loader suffix.
I would greatly recommend starting with FontAwesome 5 since it's out now.
It's much easier to integrate into a React app and much better and uses SVG Icons.
FontAwesome 5 adds support for React check it out here
They created a specific package for it. Here
Install:
$ yarn add #fortawesome/fontawesome
$ yarn add #fortawesome/react-fontawesome
and is used like so
<FontAwesomeIcon icon="coffee"/>
from bash:
yarn add #fortawesome/fontawesome
yarn add #fortawesome/fontawesome-free-solid
yarn add #fortawesome/react-fontawesome
in js file header
import FontAwesomeIcon from '#fortawesome/react-fontawesome';
import faCoffee from '#fortawesome/fontawesome-free-solid/faCoffee';
in render function
<FontAwesomeIcon icon={faCoffee} />
I am trying to add css modules to webpack in my react project. I added it like this
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
},
But I am getting compile error saying
ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/video.js/dist/video-js.css
Module not found: Error: Cannot resolve module 'font/VideoJS.eot' in /home/apurv/Downloads/Frontend-Master-master/node_modules/video.js/dist
# ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/video.js/dist/video-js.css 6:984-1011
webpack: Failed to compile.
I already have a stylus loader in webpack and it is working fine
{
test: /\.styl$/,
loader: [
'isomorphic-style-loader',
'css?sourceMap&localIdentName=[name]_[local]_[hash:base64:3]',
'stylus?sourceMap'
].join('!')
},
How can I solve this error?
I already have a loader for eot files
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},
And when I use css loader like this(below), the error doesn't come.
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
I have already installed css-loader and style-loader in my package.json file.
I am trying to implement SCSS in my project. I have ran the npm command to install the loader "npm install sass-loader node-sass --save-dev". I have created a scss file. but the problem is it is not working. i tried multiple configurations to make it runable but no luck. below are my webpack configuration. please advice,
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}]
Did you configure your loaders correctly? Cant at least see any css/scss loaders in your provided code? https://github.com/webpack-contrib/sass-loader
UPDATE::
Add ExtractTextPlugin into your config. What this does is, it moves all the require("style.css")s in entry chunks into a separate single CSS file. So your styles are no longer inlined into the JS bundle, but separate in a CSS bundle file (styles.css) https://github.com/webpack-contrib/extract-text-webpack-plugin
Include the following into your webpack.config file.
// webpack.config.js
import ExtractTextPlugin from 'extract-text-webpack-plugin'
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: [
'css',
'postcss',
{
loader: 'sass',
query: {
sourceMap: false,
}
}
],
})
}
and import your .scss files ::
import 'scss/myfile.scss'