TypeError: Cannot read property 'toWebpackConfig' any property

[s0rin]

Reopen the issue webpack/webpack-cli#2342 while it doesn't belong to webpack-cli (although is from [webpack-cli] reported): Cannot read property 'toWebpackConfig'

[webpack-cli] Failed to load '/var/www/<RoR-app>/config/webpack/production.js'
[webpack-cli] TypeError: Cannot read property 'toWebpackConfig' of undefined
    at Object.<anonymous> (/var/www/<RoR-app>/config/webpack/production.js:5:30)
    at Module._compile (/var/www/<RoR-app>/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (/var/www/<RoR-app>/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at loadConfig (/var/www/<RoR-app>/node_modules/webpack-cli/lib/webpack-cli.js:753:31)
    at /var/www/<RoR-app>/node_modules/webpack-cli/lib/webpack-cli.js:823:48
    at Array.map (<anonymous>)

config/webpack/environment.js

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
module.exports = environment;

config/webpack/production.js

process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

package.json

{
  "dependencies": {
    "@rails/ujs": "^6.1.1",
    "@rails/webpacker": "^6.0.0-pre.1",
    "bloodhound-js": "^1.2.3",
    "bootstrap": "^4.5.3",
    "clean-webpack-plugin": "^3.0.0",
    "cocoon": "github:nathanvda/cocoon#c24ba53",
    "core-js": "^3.8.2",
    "css-loader": "^5.0.1",
    "exports-loader": "^1.1.1",
    "expose-loader": "^1.0.3",
    "file-loader": "^6.2.0",
    "font-awesome": "^4.7.0",
    "jbuilder": "^0.0.5",
    "jquery": "^3.5.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    "jstree": "^3.3.11",
    "popper.js": "^1.16.1",
    "sidekiq": "^1.1.1",
    "tempusdominus-bootstrap-4": "^5.39.0",
    "turbolinks": "^5.2.0",
    "webpack": "^5.12.2",
    "webpack-cli": "^4.3.1",
    "webpack-dev-middleware": "^4.0.2",
    "webpack-dev-server": "^3.11.1"
  },
  "devDependencies": {}
}

[atrost]

Similar issue after upgrading a 5.2 Rails application to Webpacker 6. Have ruled out that is an issue with custom configs:

Steps to reproduce. Follow the Webpacker readme. Use Rails 5.2.3.
NOTICE the step in the upgrade progress when it gets broken.

1. Create a new 5.2 Rails app
   rails new myapp --webpack

2. bundle install

3. bundle update webpacker

4. rails webpacker:install

   Test: Run assets precompile to insure it compiles:

   ./bin/webpack

   Version: webpack 4.46.0
   Time: 3093ms
   Built at: 01/11/2021 2:30:15 PM
   Asset Size Chunks Chunk Names
   js/application-2181adcc3224cdc0c9c1.js 4.72 KiB application [emitted] [immutable] application
   js/application-2181adcc3224cdc0c9c1.js.map 4.5 KiB application [emitted] [dev] application
   manifest.json 364 bytes [emitted]
   Entrypoint application = js/application-2181adcc3224cdc0c9c1.js js/application-2181adcc3224cdc0c9c1.js.map_

5. yarn upgrade @rails/webpacker --latest

   At this point webpack CLI brakes:

   ./bin/webpack

   [webpack-cli] TypeError: Cannot read property 'toWebpackConfig' of undefined

Thanks.

[scottrobertson]

toWebpackConfig does not exist in 6.x. The config is very different.

You may want to remove your config/webpack files, and run rails webpacker:install to generate new webpack config files and see the difference.

Or follow https://github.com/rails/webpacker/blob/master/6_0_upgrade.md

[atrost]

Thanks, @scottrobertson, that was helpful.

How one goes about adding custom loader configs as this seems to have changed in v6 as well. With webpacker v5, one could add a module loader like this:

environment.loaders.insert('underscore-template-loader',{
	test: /\.ejs$/,
	loader: 'underscore-template-loader',
	options: {...}
}   

The above config is no longer compatible with webpacker 6!

Also, a plugin definition pattern like the following is also broken:

environment.plugins.append( ... , new webpack.ProvidePlugin({
 ...
})

So all of these needs to be rewritten in v6.

[rossta]

As v6 is still in beta, the docs haven't been finalized yet, but—

For adding loaders and/or plugins, you could try this approach:

const { webpackConfig, merge } = require('@rails/webpacker')

// define additional loader rules
const loaders = [
  {
    test: /\.ejs$/,
    loader: 'underscore-template-loader',
    options: {...}
  },
  // ... more loader rules
]

// initialize additional plugins
const plugins = [
  new webpack.ProvidePlugin({
    ...
  }),
  // ... more plugins
]

// merge with default webpack config 
// and export result
module.exports = merge(
  webpackConfig, 
  {
    module: {
      rules: loaders
    },
    plugins: plugins,
  }
)

You can find more info in the webpack configuration docs and the webpack-merge docs (for the special webpack-aware merge function).

[atrost]

Thanks @rossta

[alexvbush]

What would I do if I'm getting this error on webpacker 4.0 and don't want/can to upgrade to 6.x?

[scottrobertson]

What would I do if I'm getting this error on webpacker 4.0 and don't want/can to upgrade to 6.x?

I would open an issue with steps to replicate it, as it won't be related to this.

[floer32]

This will probably go without saying for some users, but, after rails webpacker:install, make sure to git diff your postcss.config.js, as you might want to keep your old plugins list (etc).