Webpacker: Upgrading to 3.3.0 from 3.2.2 breaks dev server in webpack config

Created on 4 Mar 2018  路  4Comments  路  Source: rails/webpacker

I'm seeing this error when launching webpack-dev-server after upgrading to webpacker 3.3.0 from 3.2.2:

00:08:07 dev-server.1   | .../config/webpack/environment.js:20
00:08:07 dev-server.1   | environment.loaders.set('font-awesome-woff', {
00:08:07 dev-server.1   |                     ^
00:08:07 dev-server.1   | 
00:08:07 dev-server.1   | TypeError: environment.loaders.set is not a function
00:08:07 dev-server.1   |     at Object.<anonymous> (.../config/webpack/environment.js:20:21)
00:08:07 dev-server.1   |     at Module._compile (module.js:662:30)
00:08:07 dev-server.1   |     at Object.Module._extensions..js (module.js:673:10)
00:08:07 dev-server.1   |     at Module.load (module.js:575:32)
00:08:07 dev-server.1   |     at tryModuleLoad (module.js:515:12)
00:08:07 dev-server.1   |     at Function.Module._load (module.js:507:3)
00:08:07 dev-server.1   |     at Module.require (module.js:606:17)
00:08:07 dev-server.1   |     at require (internal/module.js:11:18)
00:08:07 dev-server.1   |     at Object.<anonymous> (.../config/webpack/development.js:2:31)
00:08:07 dev-server.1   |     at Module._compile (module.js:662:30)
00:08:07 dev-server.1   | exited with code 0

Here's my environment.js:

// Due to webpacker's config style, only loaders and plugins can be customized here.
// Customize other configuration settings in each environment's file,
// after the .toWebpackConfig() call
const { environment }               = require('@rails/webpacker')
const erb                           = require('./loaders/erb')
const vue                           = require('./loaders/vue')
const webpack                       = require('webpack')
const FriendlyErrorsWebpackPlugin   = require('friendly-errors-webpack-plugin')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

// Per https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    attempts: 1
  }
})

environment.loaders.set('font-awesome-woff', {
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])$/,
  loader: "url-loader?limit=10000&mimetype=application/font-woff"
})
environment.plugins.set('FriendlyErrors', new FriendlyErrorsWebpackPlugin)
environment.plugins.set('LodashReplacement', new LodashModuleReplacementPlugin)
environment.plugins.set('CommonsChunkPlugin', new webpack.optimize.CommonsChunkPlugin({
  name:      'common',
  minChunks: (module) => {
    return module.context && module.context.indexOf('node_modules') !== -1
  }
}))
environment.plugins.set('CommonsChunkManifest', new webpack.optimize.CommonsChunkPlugin({
  name:     'manifest',
  minChunks: Infinity
}))

environment.loaders.append('vue', vue)
environment.loaders.append('erb', erb)
module.exports = environment

Line 2 of webpack/development.js is simply:

const environment           = require('./environment')

Nothing changed in my config, only the webpacker gem version. (I also upgraded the binstubs and yarn webpacker version.)

Most helpful comment

@viamin Please use append or prepend as documented: https://github.com/rails/webpacker/blob/master/docs/webpack.md#loaders. We have deprecated set in 3.0.2 and it's now removed.

All 4 comments

@viamin Please use append or prepend as documented: https://github.com/rails/webpacker/blob/master/docs/webpack.md#loaders. We have deprecated set in 3.0.2 and it's now removed.

That was it, thanks. I missed the deprecation notice.

@viamin Please use append or prepend as documented: https://github.com/rails/webpacker/blob/master/docs/webpack.md#loaders. We have deprecated set in 3.0.2 and it's now removed.

What about for resolving extensions? The docs are still using set there. I tried changing it to append or prepend, and it says environment.config.append is not a function.

I'm using webpacker 3.5.

Even a deprecated feature should not be removed during a minor release bump. Just saying

Was this page helpful?
0 / 5 - 0 ratings

Related issues

suhomozgy-andrey picture suhomozgy-andrey  路  3Comments

inopinatus picture inopinatus  路  3Comments

naps62 picture naps62  路  3Comments

Eearslya picture Eearslya  路  3Comments

suhomlineugene picture suhomlineugene  路  3Comments