Following the “Getting Started with Rails” guide, after the " Let’s open app/views/articles/index.html.erb , and replace its contents with:" step, clicking the http://localhost:3000/articles link results in what you see below. I got the same error on both an up-to-date Arch Linux system and a Mac running Catalina, both with the latest Ruby, Rails, Sqlite3, node.js. yarn installed. This is pretty astonishing/discouraging when the Getting Started guide’s first simple example blows up.
(I’m deleting some of the following because my first attempt to post this got the error “Sorry, new users can only have 5 links in a post”. This is going from bad to worse.)
Webpacker::Manifest::MissingEntryError in Articles#index
Showing /Users/dca/testit/app/views/layouts/application.html.erb where line #10 raised:
Webpacker can't find application.js in /Users/dca/testit/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.
I agree with you. I’ve followed the getting started guide for Elixir, .Net Blazor and Python Django and all worked without a hitch.
The reason for this issue is the awkward position of Rails on asset management. We have webpacker and old sprocket (also known as asset pipeline). Frankly, we should just switch to webpacker 100%. Webpack can do the same job just as well.
I’ll take a look at it tomorrow and try the tutorial see where it needs correction.
Actually, after a little googling, I took someone’s suggestion and did
yarn install @rails/webpacker
I then retried loading the little vanilla ‘hello world’ page. Now I get
Started GET "/hello" for 127.0.0.1 at 2021-01-07 09:29:53 -0500
(1.1ms) SELECT sqlite_version(*)
Processing by HelloController#index as HTML
Rendering layout layouts/application.html.erb
Rendering hello/index.html.erb within layouts/application
Rendered hello/index.html.erb within layouts/application (Duration: 0.3ms | Allocations: 216)
[Webpacker] Compiling...
[Webpacker] Compilation failed:
[webpack-cli] Failed to load '/tmp/hello_world/config/webpack/development.js'
[webpack-cli] TypeError: Cannot read property 'toWebpackConfig' of undefined
at Object.<anonymous> (/tmp/hello_world/config/webpack/development.js:5:30)
at Module._compile (/tmp/hello_world/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 (/tmp/hello_world/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at loadConfig (/tmp/hello_world/node_modules/webpack-cli/lib/webpack-cli.js:753:31)
at /tmp/hello_world/node_modules/webpack-cli/lib/webpack-cli.js:823:48
at Array.map (<anonymous>)
Rendered layout layouts/application.html.erb (Duration: 876.7ms | Allocations: 7689)
Completed 500 Internal Server Error in 888ms (ActiveRecord: 0.0ms | Allocations: 10186)
I’m not exactly sure how you got in this state but you appear to be using a beta release of the NPM package that does not match the API used in the generated config files.
To fix, I believe you’ll want to set the 'webpacker' gem and the '@rails/webpacker' NPM package to version 5 (I think the latest is 5.2.1)
Personally, I would have chosen a different title for your post; it could be read as unnecessarily confrontational. This could be a bug. Things happen. People make mistakes. One way to look at it instead is an opportunity to contribute and improve the project.
You say:
" To fix, I believe you’ll want to set the 'webpacker' gem and the '@rails/webpacker' NPM package to version 5 (I think the latest is 5.2.1)"
which says to me that you are suggesting version 5, not 5.2.1.
But then you suggest:
gem 'webpacker', '~> 5.2.1'
and later
yarn add @rails/webpacker@^5.2.1
So I’m a bit confused as to what you are suggesting.
I did check the version number of the installed webpacker and it is 5.2.1.
The Gemfile generated by ‘rails new hello_world’ contains the line
gem 'webpacker', '~> 5.2.1'
As for your comment about my choice of subject – yes, people make mistakes. People also get frustrated. That was exactly the case when I began a “Getting Started” tutorial of a mature and widely used system like Rails and found that the first simple example didn’t work. I’m a very experienced software developer, so from my perspective, it was quite surprising that something as basic as this was broken. Sort of like finding that the Hello World program in K&R didn’t work. So while I understand your comment, please understand mine. That we are all human works both ways. And as for helping to improve the project, hopefully my identifying this error will result in fixing it, which I think we would agree would be an improvement.
One more thing: you mentioned that you weren’t sure how I “got in this state”. Here’s how:
I did this on two different systems. One an up-to-date Arch Linux system, the other a Mac running Catalina, also up-to-date.
I installed ruby, sqlite3, node.js and yarn, as the tutorial instructs. I then installed rails, again, as instructed. Then I created my little test application, again, per the instructions.
Running the rails server and accessing http://localhost:3000 works as expected. The trouble starts when I attempt to modify config/routes.rb and the index.html.erb file per the instructions.
So I’m a bit confused as to what you are suggesting.
Since Webpacker is two projects, a gem and an NPM package, I’m suggesting that you make sure both projects are on the same stable version. The latest stable major.minor.patch version is 5.2.1, use this. When I said “version 5” I was using the term more loosely.
You confirmed the gem version (thank you) but I’m not sure what version your NPM package is, though the error you’ve received
[webpack-cli] TypeError: Cannot read property 'toWebpackConfig' of undefined
suggests to me that your NPM package is a beta release of major version 6, such as 6.0.0.beta.2.
Something like yarn list --pattern @rails/webpacker would confirm.
If you can get the NPM package to point to the correct version, and its subdependencies correctly installed (following the steps I provided previously should accomplish that) then I would expect your Webpacker assets to compile correctly.
If what I suspect it true, at least in your case, it could be that a fresh Rails install is somehow installing the wrong version of the NPM package. I haven’t had a chance to see if I can reproduce. I don’t see any related issues on the Rails so this is either a new problem or something isolated to your environment.
Trust me when I say I understand that you’re frustrated.
While I mentioned I am an experienced software developer (I wrote my first line of code 60 years ago!), I am a rank amateur when it comes to rails and ruby.
Having said that, my impression from some web searching is that npm and yarn are mutually exclusive and yarn is the default. The tutorial indicates that yarn should be installed. So I’m not sure why you are
raising the issue of the npm package version – I don’t think it’s installed. Though I freely concede that my puzzlement could be because I know so little about this system.
Your ‘yarn list --pattern @rails/webpacker’ did not yield anything that appears to be useful:
dca@pangloss:/tmp/hello_world$ !531
yarn list --pattern @rails/webpacker
yarn list v1.22.10
When I say NPM, I’m describing the Node Package Manger registry. NPM is to the JavaScript ecosystem as Rubygems.org is to Ruby.
You’re thinking of the npm command line tool. Both yarn and npm are command line tools that typically install packages from the NPM registry. Yes, generally, you’d only use one or the other in a given project and yes, yarn is the default for Rails with Webpacker.
It’s possible @rails/webpacker is not installed.
What’s the contents of your package.json file? It will contain a "dependencies" key under which I’d expect to see "@rails/webpacker" with a version declaration if it’s installed.
If it’s not installed, you won’t see "@rails/webpacker" in the package.json file, in which case you’ll need to install it:
yarn add @rails/webpacker
I would expect the above command to install version @rails/webpacker5.2.1 which you can confirm using one of the methods described above.
Running rails server and accessing localhost:3000/hello from a browser:
dca@pangloss:/tmp/hello_world$ rails server
=> Booting Puma
=> Rails 6.1.0 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.1.1 (ruby 2.7.2-p137) ("At Your Service")
* Min threads: 5
* Max threads: 5
* Environment: development
* PID: 45901
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
Started GET "/" for 127.0.0.1 at 2021-01-07 16:04:24 -0500
(0.7ms) SELECT sqlite_version(*)
Processing by Rails::WelcomeController#index as HTML
Rendering vendor/bundle/ruby/2.7.0/gems/railties-6.1.0/lib/rails/templates/rails/welcome/index.html.erb
Rendered vendor/bundle/ruby/2.7.0/gems/railties-6.1.0/lib/rails/templates/rails/welcome/index.html.erb (Duration: 4.2ms | Allocations: 440)
Completed 200 OK in 11ms (Views: 6.1ms | ActiveRecord: 0.0ms | Allocations: 3595)
Started GET "/" for 127.0.0.1 at 2021-01-07 16:04:37 -0500
Processing by Rails::WelcomeController#index as HTML
Rendering vendor/bundle/ruby/2.7.0/gems/railties-6.1.0/lib/rails/templates/rails/welcome/index.html.erb
Rendered vendor/bundle/ruby/2.7.0/gems/railties-6.1.0/lib/rails/templates/rails/welcome/index.html.erb (Duration: 7.6ms | Allocations: 216)
Completed 200 OK in 9ms (Views: 8.3ms | ActiveRecord: 0.0ms | Allocations: 833)
Started GET "/hello" for 127.0.0.1 at 2021-01-07 16:04:49 -0500
Processing by HelloController#index as HTML
Rendering layout layouts/application.html.erb
Rendering hello/index.html.erb within layouts/application
Rendered hello/index.html.erb within layouts/application (Duration: 0.2ms | Allocations: 103)
[Webpacker] Compiling...
[Webpacker] Compilation failed:
[webpack-cli] Failed to load '/tmp/hello_world/config/webpack/development.js'
[webpack-cli] TypeError: Cannot read property 'toWebpackConfig' of undefined
at Object.<anonymous> (/tmp/hello_world/config/webpack/development.js:5:30)
at Module._compile (/tmp/hello_world/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 (/tmp/hello_world/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at loadConfig (/tmp/hello_world/node_modules/webpack-cli/lib/webpack-cli.js:753:31)
at /tmp/hello_world/node_modules/webpack-cli/lib/webpack-cli.js:823:48
at Array.map (<anonymous>)
Rendered layout layouts/application.html.erb (Duration: 659.2ms | Allocations: 17284)
Completed 500 Internal Server Error in 661ms (ActiveRecord: 0.0ms | Allocations: 18338)
ActionView::Template::Error (Webpacker can't find application.js in /tmp/hello_world/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:
Ok, that’s progress but I was not expecting yarn add @rails/webpacker to install '^6.0.0-pre.1' as I can see in the contents of your package.json file. That would be a bug in my estimation.
As I mentioned earlier, you’ll want to install version '^5.2.1'.
Let’s try again with a fresh install and specifying the stable version:
I really appreciate your efforts to help. But consider that we have spent the day today trying to get “Hello world” to work with the latest version of Rails and its Getting Started tutorial. And we have failed. This just does not bode well for the quality and stability of Rails as far as I’m concerned.
My objective is deployment of a website on Heroku. I’m looking at other alternatives, currently Clojure, for getting this done.
@donallen I’m sorry to hear that getting started with Rails was difficult. I’m the author of the book Learn Ruby on Rails and I’ve written an installation guide Install Ruby on Rails for macOS. I’m not sure you’ll want to try again after your difficulties but perhaps my guide will help, as it’s been reliable and complete for many beginners.
FYI I tried to reproduce the issue described on my macbook but webpacker was correctly resolved to 5.2.1 and page loads fine, no issues observed. @donallen maybe you could push the result of rails new blog to a repo to show what it produces on your machine?
$ ruby --version
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin20]
$ sqlite3 --version
3.17.0 2017-02-13 16:02:40 ada05cfa86ad7f5645450ac7a2a21c9aa6e57d2c
$ node --version
v14.5.0
$ yarn --version
1.22.10
$ rails --version
Rails 6.1.1
$ rails new blog && cd blog
$ grep webpacker package.json
"@rails/webpacker": "5.2.1",
$ yarn list @rails/webpacker
yarn list v1.22.10
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ @rails/webpacker@5.2.1
✨ Done in 0.55s.
(Add `get "/articles", to: "articles#index"` to config/routes.rb)
$ bin/rails generate controller Articles index --skip-routes
Running via Spring preloader in process 51459
create app/controllers/articles_controller.rb
invoke erb
create app/views/articles
create app/views/articles/index.html.erb
invoke test_unit
create test/controllers/articles_controller_test.rb
invoke helper
create app/helpers/articles_helper.rb
invoke test_unit
invoke assets
invoke scss
create app/assets/stylesheets/articles.scss
$ echo '<h1>Hello, Rails!</h1>' > app/views/articles/index.html.erb
$ bin/rails server
=> Booting Puma
=> Rails 6.1.1 application starting in development
=> Run `bin/rails server --help` for more startup options
[51499] Puma starting in cluster mode...
[51499] * Puma version: 5.1.1 (ruby 3.0.0-p0) ("At Your Service")
[51499] * Min threads: 5
[51499] * Max threads: 5
[51499] * Environment: development
[51499] * Master PID: 51499
[51499] * Workers: 1
[51499] * Restarts: (✔) hot (✔) phased
[51499] * Listening on http://127.0.0.1:3000
[51499] * Listening on http://[::1]:3000
[51499] Use Ctrl-C to stop
[51499] - Worker 0 (PID: 51501) booted, phase: 0
Started GET "/" for 127.0.0.1 at 2021-01-08 10:59:15 +0100
(1.6ms) SELECT sqlite_version(*)
Processing by Rails::WelcomeController#index as HTML
Rendering /Users/sdubois/.rubies/ruby-3.0.0/lib/ruby/gems/3.0.0/gems/railties-6.1.1/lib/rails/templates/rails/welcome/index.html.erb
Rendered /Users/sdubois/.rubies/ruby-3.0.0/lib/ruby/gems/3.0.0/gems/railties-6.1.1/lib/rails/templates/rails/welcome/index.html.erb (Duration: 7.4ms | Allocations: 418)
Completed 200 OK in 25ms (Views: 12.0ms | ActiveRecord: 0.0ms | Allocations: 3089)
Started GET "/articles" for 127.0.0.1 at 2021-01-08 10:59:22 +0100
Processing by ArticlesController#index as HTML
Rendering layout layouts/application.html.erb
Rendering articles/index.html.erb within layouts/application
Rendered articles/index.html.erb within layouts/application (Duration: 1.1ms | Allocations: 110)
[Webpacker] Compiling...
[Webpacker] Compiled all packs in /Users/sdubois/Repos/blog/public/packs
[Webpacker] Hash: 415a948d492e21802f43
Version: webpack 4.44.2
Time: 2051ms
Built at: 01/08/2021 10:59:26 AM
Asset Size Chunks Chunk Names
js/application-d5a3c3b4dce84b5eb605.js 125 KiB application [emitted] [immutable] application
js/application-d5a3c3b4dce84b5eb605.js.map 139 KiB application [emitted] [dev] application
manifest.json 364 bytes [emitted]
Entrypoint application = js/application-d5a3c3b4dce84b5eb605.js js/application-d5a3c3b4dce84b5eb605.js.map
[./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/packs/application.js] 492 bytes {application} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
+ 3 hidden modules
Rendered layout layouts/application.html.erb (Duration: 4741.5ms | Allocations: 15022)
Completed 200 OK in 4747ms (Views: 4745.3ms | ActiveRecord: 0.0ms | Allocations: 16263)
