CODEWITHSUNDEEP
webpackmaterial-design
Ian Tunbridge
Ian Tunbridge

Reputation: 43

Webpack has been initialised using a configuration object that does not match the API schema. - configuration[0] has an unknown property 'mode'

I'm following the tutorial for Material Design Components Basics and I'm running into an issue with web-pack. I made the mistake of running npm audit fix and the even bigger mistake of not paying attention to what that did.

When I try to run npm start I get this error:

｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0] has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, extern

This is what my webpack.config.js file looks like:

function getStyleUse(bundleFilename) {
  return [
    {
      loader: 'file-loader',
      options: {
        name: bundleFilename,
      },
    },
    { loader: 'extract-loader' },
    { loader: 'css-loader' },
    {
      loader: 'sass-loader',
      options: {
        includePaths: ['./node_modules'],
        implementation: require('dart-sass'),
        fiber: require('fibers'),
  }
    },
  ];
}

module.exports = [
  {
    entry: './login.scss',
    output: {
      // This is necessary for webpack to compile, but we never reference this js file.
      filename: 'style-bundle-login.js',
    },
    module: {
      rules: [{
        test: /login.scss$/,
        use: getStyleUse('bundle-login.css')
      }]
    },
  },
  {
    entry: './home.scss',
    output: {
      // This is necessary for webpack to compile, but we never reference this js file.
      filename: 'style-bundle-home.js',
    },
    module: {
      rules: [{
        test: /home.scss$/,
        use: getStyleUse('bundle-home.css')
      }]
    },
  },
  {
    entry: "./login.js",
    output: {
      filename: "bundle-login.js"
    },
    module: {
      loaders: [{
        test: /login.js$/,
        loader: 'babel-loader',
        query: {presets: ['env']}
      }]
    },
  },
  {
    entry: "./home.js",
    output: {
      filename: "bundle-home.js"
    },
    module: {
      loaders: [{
        test: /home.js$/,
        loader: 'babel-loader',
        query: {presets: ['env']}
      }]
    },
  }
];

and my package.json

{
  "name": "mdc-101-web",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "start": "webpack-dev-server --progress"
  },
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.1.1",
    "dart-sass": "^1.17.2",
    "extract-loader": "^1.0.2",
    "fibers": "^3.1.1",
    "file-loader": "^1.1.11",
    "sass-loader": "^7.1.0",
    "webpack": "^3.0.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "@material/button": "^1.0.1",
    "@material/ripple": "^1.0.1",
    "@material/textfield": "^1.0.1"
  }
}

I've tried un-installing webpack : npm uninstall -g webpack also tried removing the node_modules (rm -rf node_modules). I've also tried npm cache clean --force. I can't seem to get around this issue. I don't see a mode property referenced anywhere in the webpack.config.js or anywhere else in the project for that matter.

Upvotes: 2

Views: 5275

Answers (3)

Cameron Gilbert
Cameron Gilbert

Reputation: 904

Change module.exports = [] to module.exports = {}

Upvotes: 0

Tony
Tony

Reputation: 21

      {
        loader: 'sass-loader',
        options: {
          sassOptions: {
            includePaths: [
              ['./node_modules']
            ]
          }
        }
      }

More about includePaths in sassOptions is here.

Upvotes: 2

Ian Tunbridge
Ian Tunbridge

Reputation: 43

Upon reading the notes about webpack in on step 2:

For more details on how it was configured, see the Getting Started guide.

I saw this note:

Note: We recommend using webpack 3, because we're still investigating using webpack 4. We also recommend you use webpack-dev-server 2, because this works with webpack 3.

After running this command to install webpack 3, it started working:

npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader

Anyone care to comment on what npm audit fix might have done?

Upvotes: 1

Related Questions