When I run the script for "webpack-dev-server --config webpack.dev.js", I get this error:
Error: For the selected environment is no default script chunk format available: JSONP Array push can be chosen when 'document' or 'importScripts' is available. CommonJs exports can be chosen when 'require' or node builtins are available. Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively specify the 'output.chunkFormat' directly.
What is this error? These are the files in my project directory:
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./dist/main.css" />
<title>Project Name</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
package.json
{
"name": "js",
"version": "1.0.0",
"description": "Browser 2D game ",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config webpack.dev.js",
"webpack:watch": "webpack --watch --config webpack.dev.js",
"webpack:build": "webpack --config webpack.prod.js --optimize-minimize"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"homepage": "",
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/plugin-proposal-optional-chaining": "^7.14.5",
"@babel/preset-env": "^7.15.6",
"autoprefixer": "^10.3.7",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"fibers": "^5.0.0",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.3.0",
"postcss-loader": "^6.1.1",
"sass": "^1.42.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.3.0",
"url-loader": "^4.1.1",
"webpack": "^5.56.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.1",
"webpack-merge": "^5.8.0"
}
}
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {}
}
};
webpack.common.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const outputDir = "./dist";
module.exports = {
entry: path.resolve(__dirname, "src", "index.js"),
output: {
path: path.join(__dirname, outputDir),
filename: "[name].js",
publicPath: "/dist/",
},
resolve: {
extensions: [".js"], // if we were using React.js, we would include ".jsx"
},
module: {
rules: [
{
test: /\.js$/, // if we were using React.js, we would use \.jsx?$/
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-proposal-optional-chaining"],
exclude: /node_modules/,
}, // if we were using React.js, we would include "react"
},
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: "../",
},
},
"css-loader",
"postcss-loader",
],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader",
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
name: "[name].[ext]",
outputPath: "images/",
publicPath: "images/",
},
},
],
},
{
test: /\.s[ca]ss/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: "../",
},
},
"css-loader",
"resolve-url-loader",
{
loader: "sass-loader",
options: {
implementation: require('sass')
}
},
"postcss-loader",
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: "[name].css",
chunkFilename: "[id].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
require("autoprefixer"),
],
};
webpack.dev.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "development",
devtool: "inline-source-map",
devServer: {
contentBase: "./",
watchContentBase: true,
open: true, // use "chrome" for PC
},
});
webpack.prod.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "development",
devtool: "inline-source-map",
devServer: {
contentBase: "./",
watchContentBase: true,
open: true, // use "chrome" for PC
},
});
Have you tried removing any mention of node from your browserslist entry in package.json? I had a similar problem and that seemed to work for me.
Removing "maintained node versions" from browserlists also worked for us.
I had this problem before. You can resolve this by adding a target attribute. Because JavaScript can be written for both server (Node) and browser (ES6), webpack offers multiple deployment targets that you can set in your webpack. You can split up the webpack configuration and have a separate webpack config for both server and client.
For e.g., if you're using React for your front end and Node for your backend, you can write target: 'web' and target: 'node' respectively.