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"
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 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']
}
}
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,
},
},
],
},
I am trying to setup my react project so I can use SASS in the SCSS format.
This is in my webpack.config.dev.js:
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('sass-loader'),
}
]
}
I import the scss files into my jsx in two different ways:
import './index.scss';
import css from './ModalWrapper.scss';
When I run the app I am currently getting the error:
./src/index.scss
Module build failed:
body {
^
Invalid CSS after "m": expected 1 selector or at-rule, was "module.exports = __"
in /pathtoapp/web/src/index.scss (line 1, column 1)
It appears me, that one, react is trying to interpret the SCSS as CSS which should work. In addition, react believes that body is not valid CSS. There, I would believe that neither CSS or SCSS are being loaded correctly.
Any help would be appreciated. There are quite a few unanswered questions to this problem.
If you are on Webpack 3, add this to module.rules
{
test: /\.scss$/,
loader: [
require.resolve('style-loader'),
require.resolve('css-loader'),
require.resolve('sass-loader'),
]
},
And then add the file loader and make sure to add .scss to the array of the key exclude like this
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/,],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
And of course, make sure you have style-loader, sass-loader, css-loader and file-loader in you package.json. This code snippet worked for me when using the latest version of create-react-app.
This is what ended up working for me:
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
localIdentName: "[local]___[hash:base64:5]",
},
}, {
loader: 'sass-loader',
options: {
outputStyle: "expanded",
sourceMap: true,
},
}]
},
I'm sure the other answers are just as good, but for maximum brevity, this works for me (I erased some of the internal webpack.config.dev.js comments presumably made by the create react folks):
module: {
strictExportPresence: true,
rules: [
{
test: /\.scss/,
use: ['style-loader','css-loader', 'sass-loader']
},...
I don't know if it matters, but I put this on the top. Also, yes, make sure to add the scss file to the excluded array as mentioned above.