Webpack Dev Server Config - contentBase not working in latest version

Question

When I upgrade webpack to 4.0.0-beta.3 and run npx webpack serve I get this error:

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'contentBase'. These properties are valid:
   object { bonjour?, client?, compress?, devMiddleware?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode?, watchFiles? }

This is my webpack.config.js that works in 3.11.2:

const path = require('path');
const ArcGISPlugin = require("@arcgis/webpack-plugin");

module.exports = {
  mode: 'development',
  entry: {
      main: './app/main.js'
  },
  plugins: [
      new ArcGISPlugin()
  ],
  devServer: {
      contentBase: './'
  }
}

my devDependencies from package.json:

  "devDependencies": {
    "@arcgis/webpack-plugin": "^4.18.0",
    "dojo-typings": "^1.11.11",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^4.0.0-beta.3"

How do I need to update my config to get the latest version working? When I take out the dev server object, the server will run, but serve content out of ./public which doesn't exist.

I'm new to webpack, so I'm not yet familiar with the application, config, and requirements.

score 78 · Accepted Answer · edited Apr 05 '22 at 15:31

78

devServer: {
  static: './'
}

I should read the errors more closely. The above object made my config work again.

edited Apr 05 '22 at 15:31

ggorlen

44,755
7
76
106

answered Jun 10 '21 at 18:29

roms

1,511
1
11
12

thanks bro, here my path was "./public" but make no diference – Armando Marques da S Sobrinho Oct 28 '22 at 19:45

score 38 · Answer 2 · answered May 10 '22 at 17:31

38

Use static instead as contentBase is deprecated in latest Webpack v5

  devServer: {
    static: {
      directory: path.join(__dirname, "./")
    },

Full details: https://webpack.js.org/configuration/dev-server/#devserver

answered May 10 '22 at 17:31

rottitime

1,653
17
29

score 11 · Answer 3 · answered Feb 06 '22 at 07:35

11

  devServer: {
    static: {
      directory: path.join(__dirname, "public")
    },

    compress: true,
    port: 3010, // default 8000
  },

answered Feb 06 '22 at 07:35

skyTzy

137
1
5

5

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Feb 07 '22 at 00:26

score 5 · Answer 4 · edited Apr 05 '22 at 15:31

5

Use static: './directory-name' instead of contentBase: './directory-name'

Example:

devServer: {
  static: './dist'
}

edited Apr 05 '22 at 15:31

ggorlen

44,755
7
76
106

answered Mar 07 '22 at 06:23

iamtheasad

1,017
13
15

score 3 · Answer 5 · answered Jan 10 '22 at 08:00

instead of contentBase we are using static



enter code here
const path = require("path");

module.exports = {
  entry: "./app/Main.js",
  output: {
    publicPath: "/",
    path: path.resolve(__dirname, "app"),
    filename: "bundled.js"
  },
  mode: "development",
  devtool: "source-map",
  devServer: {
    port: 3000,
    static: {
      directory: path.join(__dirname, "app")
    },

    hot: true,
    historyApiFallback: { index: "index.html" }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
          }
        }
      }
    ]
  }
};

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jan 10 '22 at 09:33

score 1 · Answer 6 · answered Jun 14 '22 at 17:06

I was using node v18, I removed and installed v16. I then changed the codeBase to static. It worked for me

devServer: { historyApiFallback: true, static: path.resolve(__dirname, './dist'), open: true, compress: true, hot: true, port: 8080, host: 'localhost' },

score 1 · Answer 7 · answered Jul 17 '22 at 02:39

1

Hot Module Reload in Webpack 5 is enabled by:

devServer: {
   port: 8080,
   hot: "only",
   static: {
      directory: path.join(__dirname, './'),
      serveIndex: true,
    },
 },

answered Jul 17 '22 at 02:39

Maksym Dudyk

1,082
14
16

score 1 · Answer 8 · answered Apr 16 '23 at 06:09

1

Use static instead contentBase has solved my problem.

answered Apr 16 '23 at 06:09

Igor Gonçalves

11
2

3

There's already several answers saying use `static` instead of `contentBase`. You should upvote those answers rather than duplicating them – K Scandrett Apr 16 '23 at 06:37

score 0 · Answer 9 · answered Apr 13 '22 at 16:10

0

Also important to set clean to false. It happened to me...

webpackConfig = {
  output: {
    clean: false
  }
}

answered Apr 13 '22 at 16:10

Carlos Oliveira

846
10
23

score 0 · Answer 10 · answered Dec 20 '22 at 13:33

0

Simply delete contentBase from you config options

delete webpackConfig.devServer.contentBase

EX: delete webpackConfig.devServer.contentBase

return merge(webpackConfig, {. ...your remaining code

answered Dec 20 '22 at 13:33

Rajesh Pal

189
1
6

Webpack Dev Server Config - contentBase not working in latest version

10 Answers10

Linked