Menu
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
},
});
587
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.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
