Webpack v4 Support?

[c0d3ster]

Hi everyone,

I just upgraded to webpack v4 today, but now I'm unable to import in my bootstrap files from 'bootstrap/less/bootstrap.less' without getting an error with @import statements in the less file. I was only able to get my bundle to build again by downgrading webpack back to v3. I believe the below error message explains why the less-loader was not being used, but I wanted to see if maybe there was an alternative solution.

npm WARN less-loader@4.0.5 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

If this is instead a config error on my part, I'd be happy to follow up with my config file. I do see a pull request regarding v4.x support, but I'm wondering what kind of timeframe we can expect before support will be merged into the main branch? Thanks in advance!

[michael-ciniawsky]

Please show the exact code snippet of the @import and the relevant part of your webpack.config.js. The webpack 4 PR (#233) doesn't contain any logical changes to the code base (yet). Otherwise the warning is 'just' a npm peerDependency warning

[kaiyoma]

yarn check is yielding an error about this package when trying to upgrade to webpack 4.0:

error "less-loader#webpack@^2.0.0 || ^3.0.0" doesn't satisfy found match of "webpack@4.0.0"

[c0d3ster]

Interesting, it seems as though I changed something to fix the issue or the webpack release 4.0.1 solved my issue. I'll go ahead and post my webpack config anyways since a lot of the syntax changed for webpack v4 and it's working. Although this is not the webpack repo, feel free to give any pointers on anything I should change with my config.

2 notes:

I do not have an optimized/minified build for production yet (also v4 has some awesome new features for automatic optimization with the mode flag)

I'm only importing less to obtain the bootstrap as of right now, any additional custom styles are in a global styles.css (this will be modular eventually, but I'm hoping that they will phase out ExtractTextWebPlugin by then)

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.join(__dirname, 'public');
var APP_DIR =  path.join(__dirname, 'src');

var config = {
	devtool: "source-map",
	entry:  path.join(APP_DIR, 'index.jsx'),
	output: {
		devtoolLineToLine: true,
		sourceMapFilename: "./bundle.js.map",
		pathinfo: true,
		path: BUILD_DIR,
		filename: 'bundle.js',
		publicPath: '/'
	},
	module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: { loader: 'babel-loader', options: { presets: ['react', 'env'] } },
        exclude: /node_modules/
      },
      {
	test: /\.(css|less)$/,
	use:
	  [
	    { loader: 'style-loader' },
            { loader: 'css-loader', options: { importLoaders : 1 } },
	    { loader: 'postcss-loader' },
	    { loader: 'less-loader' }
	  ]
      },
      {
        test: /\.json$/,
        use: [ { loader: 'json-loader' } ]
      },
      {
        test: /\.(png|jpg)$/,
        use: [ { loader: 'file-loader?name=public/[name].[ext]' } ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        use: [ { loader: 'url-loader?limit=100000' } ]
      }
    ]
  }
};

module.exports = config;