如何在另一台机器上使用 Webpacker 和 React 设置 Rails 项目？

Question

I've got a Rails 6 project that I am doing by following the book Agile Web Development with Rails 5.1, and I am using Circle CI for the build and tests. I will basically list all my questions at the end of the post.

Below is the part where I install webpacker in my circle.yml

- run:
    name: Install webpacker
    command: bundle exec rails webpacker:install

That was fine until we've installed React. We've installed React using rails webpacker:install:react . After installing React, I push the code to GitHub and then CircleCI starts building the environment however when it tries to install webpacker I get this conflict below:

    conflict  config/webpacker.yml
rails aborted!rs/burak/git/agile-rails/config/webpacker.yml? (enter "h" for help) [Ynaqdhm]

You can see what happens below if I say "yes" to this.

╰─$ rails webpacker:install
Warning: you are using an unstable release of Node.js (v15.14.0). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node
    conflict  config/webpacker.yml
Overwrite /Users/burak/git/test/agile-rails/config/webpacker.yml? (enter "h" for help) [Ynaqdhm] Y
       force  config/webpacker.yml
Copying webpack core config
       exist  config/webpack
   identical  config/webpack/development.js
   identical  config/webpack/environment.js
   identical  config/webpack/production.js
   identical  config/webpack/test.js
Copying postcss.config.js to app root directory
   identical  postcss.config.js
Copying babel.config.js to app root directory
    conflict  babel.config.js
Overwrite /Users/burak/git/test/agile-rails/babel.config.js? (enter "h" for help) [Ynaqdhm] Y
       force  babel.config.js
Copying .browserslistrc to app root directory
   identical  .browserslistrc
The JavaScript app source directory already exists
       apply  /Users/burak/.rvm/gems/ruby-2.7.3/gems/webpacker-5.2.1/lib/install/binstubs.rb
  Copying binstubs
       exist    bin
   identical    bin/webpack
   identical    bin/webpack-dev-server
File unchanged! The supplied flag value not found!  .gitignore
Installing all JavaScript dependencies [5.2.1]
         run  yarn add @rails/webpacker@5.2.1 from "."
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @babel/preset-react@7.13.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.13.12" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.12.17" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.12.1" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨  Building fresh packages...
[-/3] ⠈ waiting...
success Saved 0 new dependencies.
✨  Done in 50.91s.
Installing dev server for live reloading
         run  yarn add --dev webpack-dev-server from "."
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @babel/preset-react@7.13.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.13.12" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.12.17" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.12.1" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ webpack-dev-server@3.11.2
info All dependencies
└─ webpack-dev-server@3.11.2
✨  Done in 1.30s.
Webpacker successfully installed 🎉 🍰

So the React gets removed from the project if I say "yes" to overwrite, as far as I've understood. If I say "no" to overwrite then everything is fine.

1. Does it make sense to run rails webpacker:install on another machine? Isn't that command just installing webpacker for the project and not for the machine?

2. Instead of running rails webpacker:install and then saying "no" to overwrite I can do rails assets:precompile as well which works. Which command do I need to use to be able to successfully setup a Rails project with Webpacker and React on another machine or could someone please show me the right way to set it up?

Answer 1

1. Yes, you are trying to install webpacker for this project once again when you're running rails webpacker:install on the CI machine.
2. Yes, what you need to run on another machine is rails assets:precompile . What it does it compiles all your assets for production, not development use and that's exactly what you'd want on the non-development machine (CI, staging, production).