Rails 6.0.3.4 [Webpacker] Compilation failed - ruby-on-rails

Question

After upgrade to 6.0.3 webpack cannot read property 'plugins' in the environment.js during assets:precompile
[Webpacker] Compiling...
[Webpacker] Compilation failed:
[webpack-cli] Failed to load '/planned_maintenance/config/webpack/development.js'
[webpack-cli] TypeError: Cannot read property 'plugins' of undefined
at Object.<anonymous> (/planned_maintenance/config/webpack/environment.js:4:13)
at Module._compile (/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/planned_maintenance/config/webpack/development.js:4:21)
at Module._compile (/planned_maintenance/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
Completed 500 Internal Server Error in 3397ms (ActiveRecord: 0.0ms | Allocations: 14850)
ActionView::Template::Error (Webpacker can't find application in /planned_maintenance/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
7:
8: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9: <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10: <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11:
12: </head>
13:
app/views/layouts/application.html.erb:10
config/webpack/environment.js looks like this:
const { environment } = require('#rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
I've fixed the failure to load issue. It came down to package.json listing a wrong version number.
The issue now is on the rails console:
[Webpacker] Compiling...
[Webpacker] Compiled all packs in /Users/Lorenzo/code/LorenzoXavier/planned_maintenance/public/packs
Completed 500 Internal Server Error in 2221ms (ActiveRecord: 0.0ms | Allocations: 18151)
ActionView::Template::Error (Webpacker can't find application in /Users/Lorenzo/code/LorenzoXavier/planned_maintenance/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
7:
8: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9: <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10: <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11:
12: </head>
13:
app/views/layouts/application.html.erb:10
So I've tried:
stopping rails server
Running rails assets:clobber
Then running bin/webpack-dev-server
That has fed back an error:
node:internal/modules/cjs/loader:928
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at Object.<anonymous> (/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
at Module._compile (node:internal/modules/cjs/loader:1108:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
at Module.load (node:internal/modules/cjs/loader:973:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/Lorenzo/code/LorenzoXavier/planned_maintenance/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}

Answer 1

Environments is nil because you haven't imported webpacker.
Try including this above your const webpack line
const { environment } = require('#rails/webpacker');