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'],
},
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',
},
],
}
]
},
};
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.
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 am getting this error in IE when I try run my react site. It works in all other browsers and I have tried to load babel-polyfill multiple ways.
IE 11 error:
Here is my webpack.dev.config.js file
const path = require('path');
module.exports = {
devtool: "source-map",
mode: 'production',
entry: {
app: ['babel-polyfill', './index.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '/dist')
},
module: {
rules: [{
test: /\.js$/,
enforce: "pre",
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-0']
}
}]
},
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
}]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}]
},
};
I just can't seem to fix this error any help would be appreciated
Apologies, I didn't really post enough information for anyone to fix this as the problem didn't reside in the webpack.dev.config.js file. The problem resided in one of my React files:
publicIP().then(ip =>{
//code here
});
As IE doesn't have support for ES6 the => was causing the error!
I want to set up my react project with an scss file for each component. So given a component called PermissionPicker I want to import a PermissionPicker.scss in the jsx file.
With my current set up the webpack loaders are only loading scss files when imported in my entry point (boot-client.tsx). import './PermissionPicker.scss' in my PermissionPicker components causes a webpack error:
Module parse failed: PermissionPicker.scss Unexpected token (1:1)
You may need an appropriate loader to handle this file type.
I was under the impression that I could import scss anywhere in my project similar to how create-react-app works.
Any advice would be great!
Below is my webpack config.
const sharedConfig = () => ({
stats: { modules: false },
resolve: { extensions: [ '.js', '.ts', '.tsx', '.jsx' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' /
},
module: {
rules: [
{ test: /\.tsx?$/, include: /client/, use: 'babel-loader' },
{ test: /\.tsx?$/, include: /client/, use: 'awesome-typescript-loader?silent=true' }
]
},
plugins: [new CheckerPlugin()]
});
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
entry: { 'main-client': './client/boot-client.tsx' },
module: {
rules: [
{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },
{ test: /\.scss$/, use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{ test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
]
},
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new ExtractTextPlugin('site.css'),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]')
})
] : [
])
});
You need to install node-sass with sass-loader, because the sass-loader requires node-sass as peerDependency
npm install sass-loader node-sass --save-dev
And missing something as include: join(__dirname, 'src')
rules: [
{
test: /\.css$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({ use: 'css-loader' })
},
{
test: /\.scss$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{ test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
]
The src is a common path for Components, you need to indicate the path from the path of your config file