I am trying to update Webpack to a newer versions (by removing node_modules then running yarn), but I am not able to solve all the config errors shown below.
So far in the Webpack config, I have changed query to options, and loaders to rules. In package.json, I have replaced --colors with --color.
Original webpack.config.js [Source]:
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
entry: {
background: path.join(__dirname, './src/background'),
entry: path.join(__dirname, './src/entry'),
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/manifest.json' },
{ from: 'images/**/*' }
]),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
],
resolve: {
extensions: ['.js']
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
exclude: /node_modules/
}]
}
}
Current webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
entry: {
background: path.join(__dirname, "./src/background"),
entry: path.join(__dirname, "./src/entry"),
},
output: {
path: path.join(__dirname, "./dist"),
filename: "[name].js",
},
plugins: [
new CopyWebpackPlugin([
{ from: "src/manifest.json" },
{ from: "images/**/*" },
]),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
},
}),
],
resolve: {
extensions: [".js"],
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["react", "es2015", "stage-0"],
},
exclude: /node_modules/,
},
],
},
};
Still many of the following errors...
ERROR in ./src/background.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (/home/gameveloster/sidebar/node_modules/babel-loader/lib/index.js:103:36)
but there's no babel in the files stated in the errors, like ./src/background.js.
What is the correct way to fix this issue? Thanks!
package.json:
{
"name": "sidebar",
"private": true,
"version": "0.1.0",
"main": "dist/entry.js",
"license": "UNLICENSED",
"scripts": {
"build": "webpack --progress --profile --color",
"watch": "webpack --watch --progress --color",
"dev": "npm run watch"
},
"dependencies": {
"chrome-sidebar": "file:../chrome-sidebar",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "6.24.0",
"babel-eslint": "^7.2.3",
"babel-generator": "6.24.0",
"babel-loader": "6.4.1",
"babel-plugin-module-resolver": "2.6.2",
"babel-plugin-react-require": "3.0.0",
"babel-plugin-transform-class-properties": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.24.0",
"babel-plugin-transform-object-rest-spread": "6.22.0",
"babel-plugin-transform-react-jsx-source": "6.22.0",
"babel-plugin-transform-react-remove-prop-types": "0.3.3",
"babel-plugin-transform-runtime": "6.22.0",
"babel-preset-env": "^1.4.0",
"babel-preset-latest": "6.24.0",
"babel-preset-node6-es6": "^11.2.5",
"babel-preset-react": "6.23.0",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "6.23.0",
"copy-webpack-plugin": "^4.0.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}
Related
An error appeared - Cannot find the module, but the problem is that such a module does not exist. The correct module name is babel-plugin-proposal-class-properties (and the error - 'babel-plugin-transform-class-propties'). Please tell me what could be the problem.
I type "npm run start:dev" into the terminal and I get the error output.
webpack.config.js:
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const TerserJSPlugin = require('terser-webpack-plugin') // min js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') // min css
const autoprefixer = require('autoprefixer-stylus')
const devMode = process.env.NODE_ENV !== 'production'
// dev - devMode = true
// prod - devMode = false
const jsLoaders = () => {
const loaders = [
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
]
if (devMode) {
loaders.push('eslint-loader')
}
return loaders
}
module.exports = {
context: path.resolve(__dirname, 'frontend/src'),
// entry: ['#babel/polyfill', './index.js'],
entry: './index.js',
mode: 'development', // uncompress
output: {
// filename: 'bundle.[hash].js', // 'build.js',
// path: path.resolve(__dirname, 'dist'),
path: path.resolve(__dirname, 'frontend/static/frontend'),
filename: 'main.js'
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
resolve: {
// элиасы
extensions: ['.js'],
alias: {
'#': path.resolve(__dirname, 'frontend/src'),
fonts: path.join(__dirname, 'frontend/src/assets/fonts'),
},
},
devtool: devMode ? 'source-map' : false,
devServer: {
port: 5000,
hot: devMode,
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'frontend/templates/frontend/index.html'),
}),
new CopyPlugin({
patterns: [
{
// imgs
from: path.resolve(__dirname, 'frontend/src/assets/img'),
to: 'assets/img',
},
{
// fonts
from: path.resolve(__dirname, 'frontend/src/assets/fonts'),
to: 'assets/fonts',
},
],
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? 'style.css' : 'style.[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: jsLoaders(),
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
reloadAll: true,
},
},
'css-loader?url=false',
'sass-loader',
],
},
{
test: /\.styl$/,
use: [
{
loader: 'style-loader', // creates style nodes from JS strings
},
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: 'frontend/dist' },
},
{ loader: 'css-loader' },
// {loader: 'stylus-loader'},
{
loader: 'stylus-loader', // compiles Stylus to CSS
options: {
use: [autoprefixer()],
},
},
],
},
{
test: /\.pug$/,
loader: 'pug-loader',
options: {
pretty: true,
},
},
{
test: /\.(png|svg|jpg|gif|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
publicPath: './',
limit: 10000,
},
},
],
},
}
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --open",
"start:dev": "cross-env NODE_ENV=development webpack serve",
"build": "cross-env NODE_ENV=production webpack --mode=production",
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"autoprefixer-stylus": "^1.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"eslint": "^7.18.0",
"eslint-config-google": "^0.14.0",
"eslint-loader": "^4.0.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.0.0-beta.6",
"jest": "^26.6.3",
"mini-css-extract-plugin": "^1.3.4",
"node-sass": "4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.1.0",
"pug": "^3.0.0",
"pug-loader": "^2.4.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"stylus": "^0.54.8",
"stylus-loader": "^4.3.3",
"terser-webpack-plugin": "^5.1.1",
"url-loader": "^4.1.1",
"webpack": "^5.17.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#leanup/cli": "^1.0.90",
"#leanup/cli-preact": "^1.0.90",
"babel-loader": "8.2.1",
"browserslist": "^4.16.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
index.js - https://codepen.io/dev-sera/pen/mdObpwv
The error shows that you've misspelled "properties" as "propties", missing the "er" after the second "p" somewhere in index.js
When I run npm run build only generate build.js on dist directory this are my package.json and my webpack configuration. I dont know if doing something wrong with my configuration of webpack or with my package configuration
package.json
{
"name": "humanspiral-front",
"description": "Human Spiral Image Generator Front End",
"version": "1.0.0",
"author": "Isaac Laurrabaquio <marcodeleonmx#gmail.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules --mode production"
},
"dependencies": {
"axios": "^0.19.0",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"copy-webpack-plugin": "^4.0.3",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"uglifyjs-webpack-plugin": "^2.1.3",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.4.4",
"webpack": "^4",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3"
}
}
webpack configuration file.
var path = require('path')
var webpack = require('webpack')
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
entry: path.resolve(__dirname,'./src/main.js'),
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './static',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
module.exports.optimization = {
minimizer: [new TerserPlugin()],
minimize: true
}
}
I needed to generate all the files to deploy to the server but only generate build.js
I have a project using ractivejs with webpack. I added the ractive-loader, which can be found here https://www.npmjs.com/package/ractive-loader
When I try to build the project using npm run build:dev, i get the following error message in template:
`ERROR in ./src/Templates/Feed/Main.html 1:2
Module parse failed: Unexpected character '#' (1:2)
You may need an appropriate loader to handle this file type.
> {{#Feeds}}
| {{title}}
| {{/Feeds}}`
Template: Main.html
`{{#Feeds}}
<h1>{{title}}</h1>
{{/Feeds}}`
My webpack looks like this:
webpack.config
`const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {
prod_Path,
src_Path
} = require('./path');
const {
selectedPreprocessor
} = require('./loader');
module.exports = {
entry: {
main: './' + src_Path + '/main.js'
},
output: {
path: path.resolve(__dirname, prod_Path),
filename: '[name].[chunkhash].js'
},
devtool: 'source-map',
devServer: {
open: true,
},
module: {
rules: [{
test: /\.html$/,
use: {
loader: 'ractive-loader'
},
test: selectedPreprocessor.fileRegexp,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: false,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: selectedPreprocessor.loaderName,
options: {
sourceMap: true
},
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: false,
template: './' + src_Path + '/index.html',
filename: 'index.html'
})
],
resolve: {
alias: {
pubsub: 'aurelia-event-aggregator',
Ractive: 'ractive'
}
}
};`
Package.json
`{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build:dev": "webpack-dev-server --env dev --mode none",
"build:prod": "webpack --env prod --mode production",
"build:watch": "webpack-dev-server --env dev --mode none"
},
"author": "mwieth",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.6.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.11.0",
"postcss-loader": "^2.1.5",
"sass-loader": "^7.0.2",
"style-loader": "^0.21.0",
"webpack": "^4.10.2",
"webpack-cli": "^3.0.1",
"webpack-dev-server": "^3.1.14",
"webpack-md5-hash": "0.0.6",
"ractive": "^1.3.2",
"ractive-animatecss": "^0.1.0",
"ractive-datetime": "^1.0.0",
"ractive-loader": "^0.5.6",
"ractive-markdown": "^0.1.1",
"ractive-route": "github:martinkolarik/ractive-route",
"aurelia-event-aggregator": "^1.0.2",
"axios": "^0.18.0"
},
"dependencies": {
"acorn": "^6.1.1",
"normalize.css": "^8.0.1"
}
}`
from looking at the docs here
https://github.com/rstacruz/ractive-loader
the syntax for adding ractive-loader is just 'ractive' instead of 'ractive-loader'
use: {
test: /\.html$/,
loader: 'ractive'
}
altho it seems they do it a bit differently if you follow their example exactly
module: {
loaders: [
{ test: /\.html$/, loader: 'ractive' }
]
}
I'm working on a making my own boilerplate for React using Webpack4 and have run the issue of my css file being bundled and not rendering specific custom styles. As you can see I am using the sass-loader compile all my .sass/scss files together and postcss-loader to autoprefixing, css-loader to load the compiled css files, MiniCssExtractPlugin.loader extracts CSS into separate files, and finally style-loader to inject my css. It does all this correctly buy doesn't seem to actually apply the styles. Could anybody explain why this occurs?
The repo can be found
here
webpack.config.js
/* Required Packages */
const webpack = require('webpack')
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
//entry to bundled js file
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js' //output filename
},
//want to use the src/index.js file as entry point to bundle all of its imported files
module:{
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader'],
exclude: ["node_modules"]
}
]
},
//webpack server hot module replacement
plugins: [
new CleanWebpackPlugin('dist', {}),
new MiniCssExtractPlugin({
filename: 'style.[hash].css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash(),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['*', '.js', '.jsx'] //array of extensions to compile js
},
devServer: {
contentBase: './dist',
hot: true
}
}
package.json
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --config ./webpack.config.js --open --hot --history-api-fallback"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Nickadiemus/ns-react-boilerplate.git"
},
"author": "Nick Sladic",
"license": "MIT",
"bugs": {
"url": "https://github.com/Nickadiemus/ns-react-boilerplate/issues"
},
"homepage": "https://github.com/Nickadiemus/ns-react-boilerplate#readme",
"devDependencies": {
"autoprefixer": "^8.6.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"react-hot-loader": "^4.3.3",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1"
}
}
Use either 'style-loader' or MiniCssExtractPlugin.loader, not both:
const devMode = process.env.NODE_ENV !== 'production';
...
{
test: /\.scss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
exclude: ["node_modules"]
}
Source: mini-css-extract-plugin docs
After webpack command webpack catch all files and finish build in dist folder, but react component doesn't work. I don't understand why. My configs attached:
package.json
{
"name": "name",
"version": "1.0.0",
"description": "Example",
"main": "index.js",
"scripts": {
"watch": "webpack --progress --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"optimize-css-assets-webpack-plugin": "^3.1.1",
"postcss-loader": "^2.0.6",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"browserslist": [
"last 15 versions",
"> 1%",
"ie 8",
"ie 7"
]
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: ['./app/app.js', './app/sass/app.sass'
],
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"]
}),
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader'])
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]', // check the path
}
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]', // check the path
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Build version'
}),
new ExtractTextPlugin({
filename: 'css/app.min.css',
allChunks: true,
}),
new OptimizeCssAssetsPlugin()
]};
babel.rc
{"presets":["es2015", "react"]}
app file system:
app/
components/
fonts/
img/
sass/
app.js
index.html
index.html has a <div> with id="app" and script with src="app.js" in the body.
Move react and react-dom to dependencies instead of devDependecies in your package.json then try to build again.
Check this answer for an explanation:
Bower and devDependencies vs dependencies
Your react and react-dom packages are dependencies try moving them there.
Try modifying your webpack config file to some like this:
module.exports = {
entry: [
'./app/app.js',
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/dist',
sourceMapFilename: 'bundle.map',
},
devtool: process.env.NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map',
resolve: {
modules: ['node_modules', './app/components'],
extensions: ['.js', '.jsx'],
},
module: {
loaders: [
{
test: /(\.js$|\.jsx$)/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015'],
},
},
],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compressor: {
warnings: false,
},
})
],
};
Add other necessary rules you need to the rules array.
With this config though, you don't need the .babelrc file as everything is all in place.