Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webpack v5 devtool should match pattern

Setting up a simple Middleman app utilizing webpack 5, but getting this invalid configuration object error:

[webpack-cli]
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

None of the devtool options listed here seem to give any other error than the one above, nor does leaving out devtool or explicitly making it false.

This is the setup I had working with webpack 4, but would appreciate any insight into what could unblock the invalid configuration error.

My package.json

{
  "name": "webpack5_practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.3.0",
    "mini-css-extract-plugin": "^1.0.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.3",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

My webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  devtool: 'inline-source-map',
  mode: 'development',
  entry: {
    site: ['./source/javascripts/site.js'],
    style: ['./source/stylesheets/site.css.scss'],
  },
  output: {
    path: path.resolve(__dirname, '.tmp/dist'),
    filename: '[name].min.js',
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin()],
};

My config.rb w/ regards to webpack

# Webpack
activate :external_pipeline,
  name: :webpack,
  command: build? ? './node_modules/webpack/bin/webpack.js --bail' : './node_modules/webpack/bin/webpack.js --watch -d',
  source: "./dist",
  latency: 1
like image 887
fhbi Avatar asked Dec 18 '22 12:12

fhbi


1 Answers

Answering my own question and editing the original to include my error:

I was running Webpack through the Middleman external pipeline with the -d flag in config.rb. Removing the flag (or explicitly listing a devtool option) would fix the error.

like image 74
fhbi Avatar answered Jan 02 '23 14:01

fhbi