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,
},
},
],
},
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.
My app runs normally with yarn, but cannot load the css when I use a benchmarking library react-benchmark, which uses webpack. An minimal example of the entire project is here: https://github.com/dustinfreeman/bug-react-benchmark-css-import
Here is the loading error:
$ react-benchmark --debug src/index.tsx
✖ Compiling bundle
/Users/dustinfreeman/Documents/Code/bug-react-benchmark-css-import/src/index.css 1:5
Module parse failed: Unexpected token (1:5)
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
> body {
| font: 14px 'Century Gothic', Futura, sans-serif;
| margin: 20px;
# /Users/dustinfreeman/Documents/Code/bug-react-benchmark-css-import/src/index.tsx 3:0-21
# ./client.js
webpack.config.js
export const module = {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
}
}
],
include: /\.module\.css$/
},
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader'
],
exclude: /\.module\.css$/
},
],
};
Inline worked for me. Try: import "style-loader!css-loader!./index.css"
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']
}
}
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
Error appears while build app with webpack. Can someone help me with that?
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> * {
| color:red;
| }
webpack.config
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
},