I use webpack and react. I wrote this code line ;
import image from './images/earthmap.jpg'
and ı get this error on the console
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)
This is my webpack config file. I tried several ways but it didn't work.
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
output: {
path: path.join(__dirname, "/dist"),
filename: "index.bundle.js",
},
devServer: {
port: 3010,
watchContentBase: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: ["url-loader"],
},
{
test: /\.(png|svg|jpe?g|gif|jpg)$/,
include: /images/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "images/",
publicPath: "images/",
},
},
],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000",
},
],
},
plugins: [new MiniCssExtractPlugin()],
};
I tried with other images and image file formats but i had the same problem.
You need to use file-loader to load images.
{
test: /\.(png|jpg|ttf|eot|woff|woff2)(\?.*)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
},
},
],
},
What's likely is that you have a special character in your code somewhere.
This could be a line ending, or something similar copied into the code, or in jpg.
Related
I'm trying to exclude "swiper.min.css" to be excluded from processing as camelCase in my react webpack config but it keeps failing on other .css file when I do it like this.
I have tried many different options but each of them seems to lead nowhere :-(
I have tried with ternary operator, I have tried excluding based on wildcard etc - same result - it fails on all other .css files with this error:
"ERROR in ./src/pages/TimeTable/components/TimeTableLegend.module.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"
Any suggestion or pointers please?
var path = require('path');
var webpack = require('webpack');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.min.js"
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
exclude: /swiper\.min\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
mode: (resourcePath) => {
if (/common.css$/i.test(resourcePath)) {
return 'global'
}
return 'local'
},
localIdentName: '[name]__[local]__[hash:base64:4]',
exportLocalsConvention: 'camelCase',
},
},
},
{
loader: 'postcss-loader',
},
],
test: /swiper\.min\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
mode: (resourcePath) => {
if (/common.css$/i.test(resourcePath)) {
return 'global'
}
return 'local'
},
localIdentName: '[local]',
exportLocalsConvention: 'asIs',
},
},
},
{
loader: 'postcss-loader',
},
],
}
]
},
};
We are creating a react component, for some reason, we need it can be used in HTML directly. Like this one https://github.com/mui/material-ui/blob/master/examples/cdn/index.html. I am trying to use webpack to package my script, but it can't be used in HTML.
Here is my simple webpack config
const path = require('path');
module.exports = {
entry: glob.sync('./core/test/index.jsx'),
output: {
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'global',
filename: 'test.development.js',
},
devtool : 'source-map',
module: {
rules:[
{
test: /\.svg$/,
use: {
loader: 'svg-url-loader',
options: {
encoding: 'base64'
}
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(css|sass|scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
}
]
},
mode: 'development'
};
How should I do with the script?
I am trying to integrate https://www.npmjs.com/package/react-date-range
When I import css files, it gives loader issue.
My webpack file and error message is shown below. Any help regarding this problem is appreciated
Webpack config File
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CircularDependencyPlugin = require('circular-dependency-plugin');
var ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
var config = require('./../config');
var BASE_PATH = process.env.BASE_PATH || '/';
module.exports = {
name: 'client',
devtool: 'cheap-eval-source-map',
target: 'web',
mode: 'development',
node: { fs: 'empty' },
externals: [
{ './cptable': 'var cptable' },
{ './jszip': 'jszip' }
],
entry: {
app: [path.join(config.srcDir, 'index.js')]
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
path: config.distDir,
publicPath: BASE_PATH
},
resolve: {
modules: [
'node_modules',
config.srcDir
]
},
plugins: [
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
failOnError: true,
allowAsyncCycles: false,
cwd: process.cwd(),
}),
new HtmlWebpackPlugin({
template: config.srcHtmlLayout,
inject: false,
chunksSortMode: 'none'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
'process.env.BASE_PATH': JSON.stringify(BASE_PATH),
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new ExtractCssChunks(),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
// Modular Styles
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
}
},
{ loader: 'postcss-loader' }
],
exclude: [path.resolve(config.srcDir, 'styles')],
include: [config.srcDir]
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
}
},
{ loader: 'postcss-loader' },
{
loader: 'sass-loader',
options: {
includePaths: config.scssIncludes
}
}
],
exclude: [path.resolve(config.srcDir, 'styles')],
include: [config.srcDir]
},
// Global Styles
{
test: /\.css$/,
use: [
ExtractCssChunks.loader,
'css-loader',
'postcss-loader'
],
include: [path.resolve(config.srcDir, 'styles')]
},
{
test: /\.scss$/,
use: [
ExtractCssChunks.loader,
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
includePaths: config.scssIncludes
}
}
],
include: [path.resolve(config.srcDir, 'styles')]
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
}
},
// Files
{
test: /\.(jpg|jpeg|png|gif|svg|ico)$/,
loader: "file-loader",
options: {
name: "static/[name].[ext]",
}
}
]
},
devServer: {
hot: true,
contentBase: config.serveDir,
compress: true,
historyApiFallback: {
index: BASE_PATH
},
host: '0.0.0.0',
port: 3000
}
}
Following are the error messages, Seems like it can find the css files but cannot parse it, Let me know if anybody can help.
Error Message :
ERROR in ./node_modules/react-date-range/dist/styles.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
> .rdrCalendarWrapper {
| box-sizing: border-box;
| background: #ffffff;
# ./app/index.js 8:0-42
# multi ./app/index.js
ERROR in ./node_modules/react-date-range/dist/theme/default.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
> .rdrCalendarWrapper{
| color: #000000;
| font-size: 12px;
# ./app/index.js 10:0-49
# multi ./app/index.js
Since you are loading the css file from node_modules package but you set css loader with include only your source path. I suggest to either remove that:
{
test: /\.css$/,
use: [
ExtractCssChunks.loader,
'css-loader',
'postcss-loader'
],
},
Or put more package into your list, it's up to you:
{
test: /\.css$/,
use: [
ExtractCssChunks.loader,
'css-loader',
'postcss-loader'
],
include: [path.resolve(config.srcDir, 'styles'), /node_modules/\react-date-range /]
},
I'm a really beginner in Webpack and React.
I want to use some npm (carousel multi react), but I can't. It's something wrong with my webpack.config.
Unfortunetly I can't resolve this on my own, and I saw some similiar topics, but it doesn't working for me... or I just don't know how to implement solutions in my file.
ERROR in ./node_modules/react-multi-carousel/lib/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
const path = require("path");
const Html = require('html-webpack-plugin');
module.exports = {
entry: [
"whatwg-fetch",
"./js/index.js",
],
output: {
filename: "js/out.js",
path: path.resolve(__dirname, "build")
},
devServer: {
port: 3001,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
]
},
{
test: /\.(jpg|jpeg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'images',
outputPath: 'images',
}
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'fonts',
outputPath: 'fonts',
}
}
},
]
},
plugins: [
new Html({
filename: 'index.html',
template: './index.html',
})
]
};
Try adding the below json to the rules array.
{
test: /\.(sass|less|css)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
}
Also install the required npm modules for the above loaders,
or else you can also try with adding test: /\.(sass|css)$/, to your current setup.
Thank You! It's working. ;)
{
test: /\.(sass|css|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
]
},
Try,
npm install --save-dev css-loader style-loader sass-loader sass webpack
Then add this code into your webpack config file,
{
test: /\.(sass|less|css)$/,
use: ["style-loader", "css-loader", 'sass-loader'],
},
I am trying to combine several Webpack loaders together to load my SVG assets, transform them for inline usage and finally to convert the result into an actual React component that can be used in the application.
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
browsers: supportedBrowsers,
modules: false
}]
]
}
}
},
{
test: /\.svg$/,
include: path.resolve(__dirname, 'src'),
use: [
{
loader: 'svg-inline-loader',
options: {
removeTags: true
}
},
{
loader: 'svg-react-loader'
}
]
}
]
}
}
If svg-react-loader is used on it's own the loader works as expected, however a lot of SVG assets have unneeded elements and attributes I would like to strip out using svg-inline-loader.
When the configuration is used as above the result will be loaded as text instead of executable JavaScript.
I am using the following loaders in my attempt to accomplish this:
https://github.com/webpack-contrib/svg-inline-loader
https://github.com/jhamlet/svg-react-loader
Would it be ok to use other loaders? You can combine svgo-loader with svg-inline-loader and use all the possible options provided by svgo.
If so just do npm i -D svgo-loader
And change your webpack config to this:
{
test: /\.svg$/,
use: [
'svg-react-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
{cleanupAttrs: true}
]
}
}
],
exclude: /node_modules/
}