Upgraded my project to latest version and started facing this issue.
And here is my webpack code which I was using and working fine in older version.
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader'
},
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.module\.s(a|c)ss$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: isDevelopment
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.s(a|c)ss$/,
exclude: /\.module.(s(a|c)ss)$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
},
],
},
{
test: /\.mp3$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}
And here is my package.json
All I did was updated my node to latest version ( 16.14.0 ) and updates all the dependency packages to their latest version. And after that my app broke.
Tried different approach, but still wouldn't able to figure out the issue.
Loader can now only be a string. "use" should be used for multiple loader values.
https://github.com/webpack/webpack/issues/11418
Related
In our react app we have shared code between web and mobile (React Native).
Before Typescript it was okay to import it like this:
import {fetchNotificationsSettingsFromLocalStorage} from '../helpers/notificationsSettingsStorage';
Even though we have two files at that location with suffixes - notificationsSettingsStorage.native.js and notificationsSettingsStorage.web.js.
Now we added TS-loader and it seems to not being able to resolve those.
How do I fix it?
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|web\.js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
configFile: false,
presets:
process.env.WDYR === 'true'
? [
'#babel/preset-env',
[
'#babel/preset-react',
{
runtime: 'automatic',
development: true,
importSource: '#welldone-software/why-did-you-render',
},
],
]
: [
[
'#babel/preset-env',
{
targets: '>0.5%',
},
],
'#babel/preset-react',
],
plugins: [
'#babel/plugin-transform-runtime',
['#babel/plugin-proposal-decorators', {legacy: true}],
'#babel/plugin-proposal-class-properties',
],
},
},
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
{
test: /\.(png|jpg)(\?v=\d+\.\d+\.\d+)?$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
},
},
],
},
{
test: /\.(wav|ogg)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'sounds/',
},
},
],
},
],
},
resolve: {
extensions: ['.js', '.ts', '.tsx', '.web.js', '.json', 'css', 'woff', 'ttf', 'eot', 'svg'],
alias: {
'react-redux': process.env.WDYR === 'true' ? 'react-redux/lib' : 'react-redux',
},
},
};
I have an external css imports inside one of my components -
import "rc-slider/assets/index.css";
However, when building with webpack, the css in not being registered. I've tried adding an import prefixed with a tilde #import '~rc-slider/assets/index.css'; in my components module.css file, but that does not work. I've also tried adding include: [path.join(__dirname, '..', 'node_modules')], to my webpack.config.js file, and it results in a failed build with multiple errors that say You may need an appropriate loader to handle this file type. for each of my files.
My webpack.config.js file is the following:
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.(scss|css)$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: true,
localIdentName: "[name]__[local]__[hash:base64:5]"
}
},
{
loader: "sass-loader"
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins() {
return [autoprefixer];
}
}
},
]
},
{
test: /\.(png|jp(e*)g|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8000,
name: "images/[hash]-[name].[ext]"
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html"
}),
new BundleAnalyzerPlugin()
]
};
This has taken up half my day already, so any input would be of huge help. Thank you.
After a few more hours of trial and error, I found a solution. For anyone encountering this issue in the future, I fixed it by adding the following test to my webpack.config.js file -
{
test: /\.(scss|css)$/,
include: [CODEMIRROR_PATH],
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
},
]
},
My fill config setup is the following -
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const CODEMIRROR_PATH = path.resolve(
__dirname,
"./node_modules/rc-slider/assets/index.css"
);
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.(scss|css)$/,
include: [CODEMIRROR_PATH],
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
},
]
},
{
test: /\.(scss|css)$/,
exclude: /node_modules/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: true,
localIdentName: "[name]__[local]__[hash:base64:5]"
}
},
{
loader: "sass-loader"
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins() {
return [autoprefixer];
}
}
}
]
},
{
test: /\.(png|jp(e*)g|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8000,
name: "images/[hash]-[name].[ext]"
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html"
}),
new BundleAnalyzerPlugin()
]
};
Using the include property is definitely the way to go.
I have something similar in my code, and I used this:
{
test: /\.css$/,
include: [CODEMIRROR_PATH],
use: ["style-loader", "css-loader"]
},
I'm including CodeMirror; as such, I define CODEMIRROR_PATH as follows:
const CODEMIRROR_PATH = path.resolve(__dirname, "./node_modules/codemirror");
Does something similar not work for you?
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 have following webpack.config. all works fine, expect less import (import './some.less'). no errors, but also no change in compiled css files.
I used React 16, Babel, typescript
Any idea whats wrong here ?
module: {
rules: [
{
exclude: [
// html-webpack-plugin
/\.ejs$/, /\.html$/, /\.ico$/,
// css-loader
/\.css$/,
// awesome-typescript-loader
/\.json$/, /\.jsx?$/, /\.tsx?$/,
// url-loader
/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/
],
loader: 'file-loader',
options: {
name: 'media/[name].[ext]'
}
},
{
test: [/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/],
loader: 'url-loader',
options: {
limit: 8192,
name: 'media/[name].[ext]'
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')()
]
}
}
]
},
{ test: /\.less$/, loaders: ["style-loader", "css-loader", "less-loader"]},
Her is my webpack.config.js and i am getting this error
element.loader.split is not a function
i also changed loader to loaders after searching for its answer but it's still not working
const postcssPlugins = [
require('postcss-cssnext')(),
require('postcss-modules-values')
];
const scssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
];
const postcssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: true } },
{ loader: 'postcss-loader', options: { plugins: () => [...postcssPlugins] } }
];
var path = require('path');
var config = {
entry: './todoApp.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 9191
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(scss|sass)$/,
loader: scssLoader,
include: [__dirname]
},
{ test: /\.css$/,
loader: postcssLoader,
include: [__dirname]
}
]
}
}
module.exports = config;
I am not able to find where the error is
Please guide!
Try to change loader by loaders:
{
test: /\.(scss|sass)$/,
loaders: scssLoader,
include: [__dirname]
},
{ test: /\.css$/,
loaders: postcssLoader,
include: [__dirname]
}