CODEWITHSUNDEEP
webpackwebpack-dev-serverwebpack-cli
roms
roms

Reputation: 1851

Webpack Dev Server Config - contentBase not working in latest version

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.

Upvotes: 80

Views: 70787

Answers (10)

Igor Gonçalves
Igor Gonçalves

Reputation: 31

Use static instead contentBase has solved my problem.

Upvotes: 3

Rajesh Pal
Rajesh Pal

Reputation: 183

Simply delete contentBase from you config options

delete webpackConfig.devServer.contentBase

EX: delete webpackConfig.devServer.contentBase

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

Upvotes: 0

Maksym Dudyk
Maksym Dudyk

Reputation: 1164

Hot Module Reload in Webpack 5 is enabled by:

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

Upvotes: 1

Kip
Kip

Reputation: 11

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' },

Upvotes: 1

rottitime
rottitime

Reputation: 2461

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

Upvotes: 47

Vamoss
Vamoss

Reputation: 925

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

webpackConfig = {
  output: {
    clean: false
  }
}

Upvotes: 0

roms
roms

Reputation: 1851

devServer: {
  static: './'
}

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

Upvotes: 93

iamtheasad
iamtheasad

Reputation: 1127

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

Example:

devServer: {
  static: './dist'
}

Upvotes: 7

skyTzy
skyTzy

Reputation: 137

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

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

Upvotes: 11

Jai Kishan
Jai Kishan

Reputation: 31

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" } }]]
          }
        }
      }
    ]
  }
};

Upvotes: 3

Related Questions