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'
]
}]
},
Related
I'm learning to build my react project using Webpack.
I already have configuration a webpack.config.js to load CSS file.
webpack.config.js:
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
exclude: /(node_modules)/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
],
},
{
test: /\.scss$/,
exclude: /(node_modules)/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
...
],
},
...
}
npm run build
This problem appeared.
Module parse failed: Unexpected token (6:3) 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 | * Copyright 2011-2020
Twitter, Inc. | * Licensed under MIT
(https://github.com/twbs/bootstrap/blob/main/LICENSE)
> */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;
..... ```
I don't understand what should to do. Thank you.
Not sure why you exclude node_modules why you're still importing css from there which means just remove exclude: /(node_modules)/ then would work:
{
test: /\.css$/,
// exclude: /(node_modules)/, // Remove this
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
],
},
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
WOFF files are failing to load and I am not getting an idea to why file-loader is failing to load WOFF, WOFF2 and SVG.
Here is my Webpack 4 loaders config:
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
exclude: /node_modules/,
loader: "file-loader"
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
Please suggest a solution to me.
You can user webpack url-loader for that and it will resolve your problem.If you are using npm you can install npm install url-loader --save-dev and in your webpack.config.js you can write module settings like this
{test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'}
and import images like import img from './image.svg'
Github : https://github.com/webpack-contrib/url-loader
NPM : https://www.npmjs.com/package/url-loader
{
test: /\.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[hash].[ext]',
mimetype: 'application/font-woff'
}
}
]
}
It worked for me. And also you can use resolve-url-loader
https://www.npmjs.com/package/resolve-url-loader
Error Terminal
ERROR in ./~/semantic-ui-css/semantic.css
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (11:0)
Error Console chrome
Uncaught Error: Cannot find module "semantic-ui-css/semantic.css"
I found the error it's in this line import 'semantic-ui-css/semantic.css'; so i search for this kind of error, i just installed url-loader and keeps the same error, here's my webpack config
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/, <--- this delete a lot of errors with semantic, but wont work with "Unexpected character '#'"
loader: 'url-loader?limit=100000'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /\.css$/,
loaders: [
'style-loader?sourceMap',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url-loader',
'sass-loader'
],
exclude: /node_modules/
}
]
}
so, how should i fix this issue? i think it's something with import 'semantic-ui-css/semantic.css'; for something that i dont get it yet, maybe because it dosnt have import (this section) from 'semantic-ui-css/semantic.css';
change this:
{
test: /\.css$/,
loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ],
exclude: /node_modules/
},
to this:
{
test: /\.css$/,
loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ]
}
In other words... remove the exclude.
Another option is to not change as mentioned above... And you probably dont want to assume css modules for all node_modules. I think this way is better... So, instead add an additional rule:
{
test: /\.css$/,
include: path.resolve('node_modules'),
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}
}]
}`
While using react-day-picker, i get the following error:
You may need an appropriate loader to handle this file type.
| /* DayPicker styles */ |
| .DayPicker { | display: -webkit-box; |
display: -ms-flexbox; #
./src/components/portfolio/RecordInvestorDetail.react.js 47:0-41
Module parse failed: /home/yash/Documents/CRONJ/waccal/node_modules/react-day-picker/lib/style.css Line 3: Unexpected token .
_
You must install and enable style-loader and css-loader for Webpack:
npm install style-loader css-loader --save-dev
Then add those loaders in webpack.config.js:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
I resolved the error by adding
loaders : [
'style',
]
I already had
loaders : [
'style-loader',
'css-loader',
'autoprefixer?browsers=last 2 version',
'sass-loader?includePaths[]=' + paths.src('styles')
]
Now the loaders are
loaders : [
'style',
'style-loader',
'css-loader',
'autoprefixer?browsers=last 2 version',
'sass-loader?includePaths[]=' + paths.src('styles')
]
I had this configuration before:
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
}
And got the issue fixed by removing the line:
exclude: /node_modules/
I wasnt allowing webpack to compile the files from react-day-picker by having this.
the correct:
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
}
I am using webpack 2 and node 6.9 and trying to implement the css/scss in my project. I have installed all the required loaders like style,sass etc. earlier below was my webpack configuration and it is working fine but scss is not applied on my project,
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}]
to apply the css i have installed all the loaders and i changed the above webpack configuration to below
rules: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
'css-loader',
'babel-loader',
'postcss',
{
loader: 'sass-loader',
query: {
sourceMap: false,
presets: ['es2015'],
}
}
],
})
}]
};
plugins: [
new ExtractTextPlugin("style.css"),
]
but it is still not working for me. i have tried some other configurations also but everytime it is giving me same error as below,
Uncaught Error: Module parse failed: \index.js Unexpected token (7:3)
You may need an appropriate loader to handle this file type.
ReactDOM.render((
<App />
), document.getElementById('root'));
at Object.<anonymous> (bootstrap 6298272…:708)
at __webpack_require__ (bootstrap 6298272…:659)
at bootstrap 6298272…:708
at bootstrap 6298272…:708
Can anyone help me to get rid of the error and apply the scss. Thanks in advance!!
Able to make it work. Below is the code:
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: [ "style-loader", "css-loader", 'sass-loader' ],
}]