I would like to use PrimeReact DataTable on my app. When I import the css files:
import "primereact/resources/themes/nova-light/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
It throws this error:
ERROR in ./node_modules/primereact/resources/themes/nova-light/theme.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";
| /* open-sans-300 - latin */
| #font-face {
# ./src/pages/_app.js 20:0-58
# ./src/index.js
ERROR in ./node_modules/primeicons/primeicons.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
> #font-face {
| font-family: 'PrimeIcons';
| font-display: auto;
# ./src/pages/_app.js 22:0-35
# ./src/index.js
ERROR in ./node_modules/primereact/resources/primereact.min.css 1:0
Module parse failed: Unexpected token (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
I have adjusted the webpack.config.js like this:
var path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
exclude: [
path.resolve("node_modules/primereact/resources/primereact.css"),
path.resolve(
"node_modules/primereact/resources/themes/nova-light/theme.css"
)
],
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
externals: {
Config: JSON.stringify(
process.env.NODE_ENV === "production"
? require("./config.prod.json")
: require("./config.dev.json")
)
}
};
Other answers to similar questions seem outdated, since by doing them, other errors or the same are thrown.
https://forum.primefaces.org/viewtopic.php?t=52134
This post had the solution:
https://github.com/webpack-contrib/sass-loader/issues/344
I was missing these loaders:
{
test: /\.css$/,
use: [
{
loader: "css-loader"
}
]
},
{
test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000"
},
Perhaps this post might answer your question. It's too much to copy the entire answer, and I believe if you are able to access this page, you will have access to that answer.
Minimum Reproducible Answer
You need to install the es2015 preset:
npm install babel-preset-es2015
and then configure babel-loader:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
Related
I'm trying to use cypress for integration testing on a React project. However, I'm getting the following error:
Error: Webpack Compilation Error
./node_modules/react-pro-sidebar/dist/css/styles.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
As the error suggests, I'm using the react-pro-sidebar package.
The first lines of the .css file of the package that is causing the error,
> #keyframes swing {
| 0%,
| 30%,
I've tried installing the css and scss webpack loader but it still failed.
Here's my webpack.config.js file,
const {resolve} = require('path');
module.exports = {
entry: [
'./md5.js'
],
output: {
path: resolve('./dist'),
filename: 'md5.min.js',
libraryTarget: "var",
library: "MD5"
}
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader'],
},
]
}
};
The code that triggers the error,
import React from 'react';
describe('example to-do app', () => {
beforeEach(() => {
cy.visit('http://localhost:3000')
})
it("containsMain",()=>{
cy.contains(".main")
})
})
The error also happens if I just try to load the page as well.
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.
I'm loading icons on my app.js
import bg from './icons/bg.png';
import br from './icons/br.png';
import rg from './icons/rg.png';
import ig from './icons/invert.png';
import bw from './icons/bw.png';
import by from './icons/by.png';
import gm from './icons/gm.png';
import rs from './icons/rs.png';
They work fine when i run the default react start script, but when i try to compile using this webpack:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/js/index.js',
devtool: 'inline-source-map',
target: 'electron-renderer',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [[
'#babel/preset-env', {
targets: {
esmodules: true
}
}],
'#babel/preset-react']
}
}
},
{
test: [/\.s[ac]ss$/i, /\.css$/i],
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
}
]
},
resolve: {
extensions: ['.js'],
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'build', 'js'),
},
};
I get this errors for each image:
ERROR in ./src/js/icons/bg.png 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
(Source code omitted for this binary file)
# ./src/js/App.js 2:0-32 230:9-11
# ./src/js/index.js 4:0-24 5:107-110
Which provably means that babel is trying to load the image as a javascript file, is there a way to load a image on React when compiling it with Babel?
As mentioned in webpack docs
Out of the box, webpack only understands JavaScript and JSON files.
So you need to use loader for png file as webpack don't know what to do with that file.
file-loader
More on Loaders
I am getting the following error.
ERROR in ./node_modules/react-clock/dist/Clock.css 1:0
Module parse failed: Unexpected token (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
.react-clock {
| display: block;
| position: relative;
ERROR in ./node_modules/react-time-picker/dist/TimePicker.css 1:0
Module parse failed: Unexpected token (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
.react-time-picker {
| display: inline-flex;
| position: relative;
i ｢wdm｣: Failed to compile.
I am able to solve the issue by just replacing the code.
Older
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"]}
Newer
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
I was using a css file from the node_modules and it was excluded.
Thanks for the help Guys
You could use css loader for this, Add the following to the rules array in webpack config should be fine:
{
test: /\.css$/,
// exclude: /node_modules/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
importLoaders: 1,
},
},
],
},
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"],
},
],
},
},