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]
}
Related
Before I had the following webpack.js:
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const config = {
entry: {
index: path.resolve(__dirname, 'src') + '/index.jsx
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['static/dist']
})
],
resolve: {
extensions: ['.js','.jsx','.css'],
alias: {
'#src': path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
exclude: /node_modules/,
query:{
presets: ['#babel/react', '#babel/preset-env'],
plugins: [
['#babel/plugin-proposal-decorators', { 'legacy': true }],
['#babel/plugin-proposal-class-properties', {'loose': true}],
'#babel/transform-runtime'
]
}
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.md$/,
use: [
{
loader: "html-loader"
},
{
loader: "markdown-loader",
}
]
}
]}
};
module.exports = config;
Everything worked. After I decided to add environment variables into it I had to rewrite the content to:
module.exports = (env)=>{
const envPath = env.NODE_ENV ? `.env.${env.NODE_ENV}` : '.env';
const config = {
entry: {
index: path.resolve(__dirname, 'src') + '/index.jsx
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['static/dist']
})
],
resolve: {
extensions: ['.js','.jsx','.css'],
alias: {
'#src': path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
exclude: /node_modules/,
query:{
presets: ['#babel/react', '#babel/preset-env'],
plugins: [
['#babel/plugin-proposal-decorators', { 'legacy': true }],
['#babel/plugin-proposal-class-properties', {'loose': true}],
'#babel/transform-runtime'
]
}
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.md$/,
use: [
{
loader: "html-loader"
},
{
loader: "markdown-loader",
}
]
}
]}
};
return config;
}
Now I have the following error:
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\path'
resolve './src' in 'D:\path'
Why now is it not working and how to fix it?
The index.jsx is in path/src folder.
Found the solution. I forgot I used merging configs so I have a webpack.dev.js which has the following line:
const common = require('./webpack.common.js');
And after the refactoring, as the webpack.common.js returns the function instead of the object the line should be changed to:
const common = require('./webpack.common.js')();
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?
When i run build of my react app i got: ERROR in bundle.js from UglifyJs
Unexpected token: name i found this https://github.com/joeeames/WebpackFundamentalsCourse/issues/3
they suggest use babel-reset-es2015 but i need babel-preset-react.
My webpack config:
const path = require('path')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractSass = new ExtractTextPlugin({
filename: "style.css",
disable: process.env.NODE_ENV === "development"
});
const config = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/dist")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {presets:['react']}
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
}
},
{ test: /\.html$/,
use:[{
loader: 'html-loader',
options: {
minimize:true
}
}]
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
}
]},
plugins: [
extractSass
],
node:{
fs: "empty"
}
}
module.exports = config
You can have both, they are not mutually exclusive. Also query has been replaced with options in webpack 2, just as you're using it in your other loaders already. query still exists for compatibility reasons, but you should just use options.
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ['es2015', 'react']
}
},
Somebody can help me on configuring webpack for following requirements
AngularJS (1.6) ES6 to ES5 converstion
SCSS to CSS compiler
All js to single bundle
All css to single bundle
All folder structure should created with html only ( no js files, since we alrady bundling it )
This is what I have tried so far
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.woff2$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=image/svg+xml'
}
]
},
plugins: [
//new ExtractTextPlugin("styles.css"),
]
};
Updated webpack conf
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}, {
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'file-loader?name=[name].[ext]&publicPath=../fonts/&outputPath=/assets/fonts/'
},
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=/assets/images/[name].[ext]' },
{
test: /\.(html)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.(json)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader' // compiles Sass to CSS
}],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('assets/css/styles.css')
]
};
sample project with webpack configured posted it in my github
I have installed bootstrap and when I run the application using webpack I am facing this error:
Angularjs: Cannot find module “../../node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot”
Webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
'./app/app.js',
'./app/index.html',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8081/'
],
output: {
filename: 'bundle.js',
path: __dirname + './js'
},
module: {
loaders: [
// Exports Angular
{ test: /[\/]angular\.js$/, loader: "exports?angular" },
// Script Loaders
{ test: /\.coffee$/, loader: "coffee" },
{ test: /\.html/, loader: 'file?name=[name].[ext]' },
// Style Loaders, style! inlines the css into the bundle files
{ test: /\.css$/, loader: "style!css!less" },
{ test: /\.scss$/, loader: "style!css!sass" },
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
// activate source maps via loader query
'css?sourceMap!' +
'less?sourceMap'
)
},
{ test: /\.(jpg|png|gif)$/, loader: "file-loader?me=images/[hash]. [ext]"},
{ test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{ test: /\.(woff|woff2)$/, loader: "url?limit=10000&minetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]},
resolve: {
extensions: [
'',
'.js', '.coffee',
'.html',
'.css', '.styl', '.scss', '.less'
]},
plugins: [
// extract inline css into separate 'styles.css'
new ExtractTextPlugin('styles.css')
]};