Error when running webpack script for simple project

Question

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. — JulianJohannesen
– JulianJohannesen, Commented Oct 13, 2021 at 15:03
@JulianJohannesen can you make your comment an answer? It seems to work for lots of people (including me). — Francis Upton IV
– Francis Upton IV, Commented Jan 19, 2022 at 1:25

JulianJohannesen · Accepted Answer · 2022-01-20 15:02:02Z

21

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.

answered Jan 20, 2022 at 15:02

JulianJohannesen

3863 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

piotr.d Over a year ago

@leep can you please mark that answer as a solution? It seems to be the right answer.

Giuseppe Caponetto · Accepted Answer · 2022-02-22 08:44:00Z

10

Removing "maintained node versions" from browserlists also worked for us.

answered Feb 22, 2022 at 8:44

Giuseppe Caponetto

1391 silver badge4 bronze badges

Comments

Khalil · Accepted Answer · 2022-03-07 11:48:41Z

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.

rsenna · Accepted Answer · 2025-01-02 19:16:02Z

3

Remove the whole object browserslist, or update it with valid options.

For instance, this should work:

"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ]
}

edited Jan 2 at 19:16

rsenna

12.1k1 gold badge58 silver badges62 bronze badges

answered Dec 8, 2022 at 21:47

Rafael Grilli

2,0791 gold badge15 silver badges28 bronze badges

Comments

Eto Tenma · Accepted Answer · 2024-04-13 06:39:01Z

2

I solved the problem by specifying a list of targets

module.exports = { 
...
  target: ["web", "es5"],
...
}

answered Apr 13, 2024 at 6:39

Eto Tenma

333 bronze badges

Collectives™ on Stack Overflow

Error when running webpack script for simple project

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Related