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.
Related
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
Unexpected token (1:0) #import "./variables"; Getting this error using webpack
my webpack.config is like this module:
{
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
}
Any one help me to sort the issue
Sass-loader seems to be incompatible with webpack 4.
You can use mini-css-extract-plugin which I use with webpack 4.
https://github.com/webpack-contrib/mini-css-extract-plugin
People are facing this #import issue with webpack 4. Take a look at following thread.
https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af
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} />
In our project, I'm trying to refactor all our components to have a .jsxfile extension rather than .js. My webpack.config.babel file now looks like this:
import fs from "fs"
const babelrc = JSON.parse(fs.readFileSync("./.babelrc"))
export default {
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.jsx$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.json$/,
loader: "json-loader",
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
],
},
}
However when I try to run import Main from './components/Main/Main';
in my client.js file, it shows me
Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js'
# multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js
I'm new to babel and webpack. What other places to I need to register the jsx file extension?
Take a look at the documentation for resolve.extensions:
https://webpack.js.org/configuration/resolve/#resolveextensions
You can add the following to your Webpack config to also automatically resolve files with the .jsx extension by adding the following to your config:
resolve: {
extensions: ['.js', '.jsx']
}
Btw, you can also optimize your loader config by removing the separate .jsx loader and make the first loader test for /\.jsx?$/
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"],
},
],
},
},