webpacker is not installed successfully on rails 4.2 - ruby-on-rails

Terminal: bash on Ubuntu on windows 10
Rails: 4.2.8
npm: 5.5.1
node: v8.9.1
yarn: 1.3.2
After rake webpacker:install, the console shows as follows. Although it shows "successfully installed" at the very end, some errors appear in the log. Is it normal?
create config/webpacker.yml
Copying webpack core config and loaders
create config/webpack
create config/webpack/development.js
create config/webpack/environment.js
create config/webpack/production.js
create config/webpack/test.js
Copying .postcssrc.yml to app root directory
create .postcssrc.yml
Copying .babelrc to app root directory
create .babelrc
Creating javascript app source directory
exist app/javascript
identical app/javascript/packs/application.js
Installing binstubs
run bundle binstubs webpacker from "."
append .gitignore
Installing all JavaScript dependencies
run yarn add #rails/webpacker coffeescript#1.12.7 from "."
yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents#1.1.3: The platform "linux" is incompatible with this module.
info "fsevents#1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "#rails/webpacker > postcss-cssnext#3.0.2" has unmet peer dependency "caniuse-lite#^1.0.30000697".
error An unexpected error occurred: "EINVAL: invalid argument, lstat '/mnt/d/Github/cfegame/node_modules/babel-core/package-lock.json'".
info If you think this is a bug, please open a bug report with the information provided in "/mnt/d/Github/cfegame/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Installing dev server for live reloading
run yarn add --dev webpack-dev-server from "."
yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents#1.1.3: The platform "linux" is incompatible with this module.
info "fsevents#1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "webpack-dev-server > webpack-dev-middleware#1.12.1" has unmet peer dependency "webpack#^1.0.0 || ^2.0.0 || ^3.0.0".
warning " > webpack-dev-server#2.9.4" has unmet peer dependency "webpack#^2.2.0 || ^3.0.0".
error An unexpected error occurred: "EINVAL: invalid argument, lstat '/mnt/d/Github/cfegame/node_modules/camelcase-keys/node_modules/camelcase/license'".
info If you think this is a bug, please open a bug report with the information provided in "/mnt/d/Github/cfegame/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Webpacker successfully installed πŸŽ‰ 🍰
When I "successfully installed" webpacker and I want to check if webpack-dev-server worked properly, the console shows as follows. Did it mean I don't install webpacker properly?
(home_dir)/.rvm/gems/ruby-2.3.3/gems/webpacker-3.0.2/lib/webpacker/dev_server_runner.rb:47:in `exec': No such file or directory - (project_dir)/node_modules/.bin/webpack-dev-server (Errno::ENOENT)
from (home_dir)/.rvm/gems/ruby-2.3.3/gems/webpacker-3.0.2/lib/webpacker/dev_server_runner.rb:47:in `block in execute_cmd'
from (home_dir)/.rvm/gems/ruby-2.3.3/gems/webpacker-3.0.2/lib/webpacker/dev_server_runner.rb:46:in `chdir'
from (home_dir)/.rvm/gems/ruby-2.3.3/gems/webpacker-3.0.2/lib/webpacker/dev_server_runner.rb:46:in `execute_cmd'
from (home_dir)/.rvm/gems/ruby-2.3.3/gems/webpacker-3.0.2/lib/webpacker/dev_server_runner.rb:11:in `run'
from (home_dir)/.rvm/gems/ruby-2.3.3/gems/webpacker-3.0.2/lib/webpacker/runner.rb:6:in `run'
from (home_dir)/.rvm/gems/ruby-2.3.3/gems/webpacker-3.0.2/exe/webpack-dev-server:8:in `<top (required)>'
from bin/webpack-dev-server:17:in `load'
from bin/webpack-dev-server:17:in `<main>'

basically yarn is managing your packages. He is trying to install the webpack-dev-server- with yarn add --dev webpack-dev-server from "." but it fails. This is the documentation about that yarn add command
npm is the alternative for using yarn for installing packages so in your server terminal run
npm install webpack-dev-server
and it should install the dependencies
When I "successfully installed" webpacker and I want to check if webpack-dev-server worked properly, the console shows as follows. Did it mean I don't install webpacker properly?
(home_dir)/.rvm/gems/ruby-2.3.3/gems/webpacker-3.0.2/lib/webpacker/dev_server_runner.rb:47:in `exec': No such file or directory - (project_dir)/node_modules/.bin/webpack-dev-server (Errno::ENOENT)
You either did not install it or your are searching the wrong path, maybe the gem is installed in .rvm/gems/ruby-2.3.3somethingelse
Some discussion you may want to read
https://github.com/Microsoft/WSL/issues/2448
https://github.com/yarnpkg/yarn/issues/4188

Related

How to setup a Rails project with Webpacker and React on another machine?

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.
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?
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?
Yes, you are trying to install webpacker for this project once again when you're running rails webpacker:install on the CI machine.
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).

Heroku: Error - /bin/sh: 1: npm: not found when deploying to Heroku

I have a Rails 6 Application which I just built.
However, when I try deploying to Heroku from my command line using:
git push heroku master
I get the error below after some :
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents#1.1.1: The platform "linux" is incompatible with this module.
info "fsevents#1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
$ npm run build
/bin/sh: 1: npm: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
I have re-run the command several times, but I still get the same error.
I finally figured out the issue.
The issue was because I did not have a Nodejs Build pack to run the npm run build command for assets compilation.
Here's how I fixed it:
I added the Nodejs buildpack to the application with the buildpacks:add command:
heroku buildpacks:add --index 1 heroku/nodejs
This will insert the Node.js buildpack at the first position in the order of buildpack execution, and move the other buildpacks that are ahead of it down one position.
Note: The buildpack for the primary language of your app should be the last buildpack added. In this case Ruby is our primary language.
You can then view the buildpacks for your application:
heroku buildpacks
=== nameless-brushlands-4859 Buildpack
1. heroku/nodejs
2. heroku/ruby
Note: The last buildpack in the list will be used to determine the process types for the application.
You should always specify a Node.js version, npm version and yarn version that matches the runtime you’re developing and testing with. To find your version locally:
node --version
npm --version
yarn --version
Now, use the engines section of the package.json to specify the version of Node.js, npm version and yarn version to use on Heroku.
"version": "0.1.0",
"engines": {
"node": "12.x",
"npm": "6.x",
"yarn": "1.x"
},
Now you can deploy to Heroku and it will work fine:
git add .
git commit -m "add nodejs buildpack"
git push heroku master
That's all.
I hope this helps

Rails: Webpack-dev-server has unmet peer dependency

I am currently trying to set up a Rails 6.0.2 application on Ubuntu 18.0.4 using Docker.
I have successfully set up the database using PostgreSQL and I have installed the necessary gems by running the command below:
bundle install
However, when I try to install the node packages using the command below:
yarn install
I get the message below which gives me some concern that something is not right:
warning " > webpack-dev-server#3.10.3" has unmet peer dependency "webpack#^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware#3.7.2" has unmet peer dependency "webpack#^4.0.0".
I have tried a few solutions but it's not working. I need some help. Thank you.
Here's how I solved:
Simply run the command below to upgrade the version of yarn to your desired version:
yarn upgrade webpack#^4.0.0
Note: You can substitute 4.0.0 with the required version for yarn, say 5.0.0.
Another Solution
Add the version of webpack that you want to your package.json file. Here the version of webpack used is 4.43.0:
"devDependencies": {
"webpack": "^4.43.0",
"webpack-dev-server": "^3.11.0"
}
And then run yarn install to install webpack
For Docker Applications only:
Add the command just before the yarn install command in your Dockerfile:
RUN yarn upgrade webpack#^4.0.0 \
yarn install
Reference to this on GitHub: Unmet peer dependencies
That's all.
I hope this helps.
I upgraded packages one at a time but kept getting the same warnings.
So I ran:
yarn upgrade
and next time I ran this all the warnings messages there were there previously had gone away:
yarn install

Rails 5 production assets precompile error

I'm working on Ubuntu 16.04 LTS server for deploying multiple RoR apps.
I'm using an Amazon EC2 machine with a Nginx webserver managing multiple RoR app on different domains. Some products are in development environment for testing and others in production environment.
I decided to update a site installing a HTTP certificate with certbot.
I followed the instructions below and everything was fine.
https://certbot.eff.org/#ubuntuxenial-nginx
After updating the production assets with:
`RAILS_ENV=production rake assets:precompile`
I have the following message instead of the list of assets files generated
Installing certbot I broke some dependencies for assets compiling flow?
`Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install`
I tried to install yarn with npm globally but after I have:
`yarn install v1.3.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
info Lockfile not saved, no dependencies.
Done in 0.09s.`
As i see, Yarn is a package. Please install that package via npm (on your production server):
npm install yarn -g
Hope this helps.

Grunticon & TravisCI

We are running into an issue when Grunticon is being installed into our Rails 4 engine on TravisCI. I'd appreciate any ideas on:
Making the path shorter for installing Grunticon in Rails
A way for TravisCI to skip installing Grunticon during our builds (we don't need it for testing)
A way to upgrade npm on TravisCI (rumor has it that npm v3 may solve this)
Error from Travis:
Gem::Package::TooLongFileName: File "node_modules/grunt-grunticon/node_modules/grunticon-lib/node_modules/directory-colorfy/node_modules/phantomjs/node_modules/fs-extra/node_modules/rimraf/node_modules/glob/node_modules/minimatch/node_modules/brace-expansion/node_modules/balanced-match/Makefile" has a too long path (should be 256 or less)
An error occurred while installing trusty-convoy-extension (0.0.3), and Bundler
cannot continue.
Make sure that `gem install trusty-convoy-extension -v '0.0.3'` succeeds before
bundling.
The command "eval bundle install --jobs=3 --retry=3 --deployment --path=${BUNDLE_PATH:-vendor/bundle}" failed. Retrying, 2 of 3.
Grunticon is installed using a Gruntfile.js in our root directory. That triggers scripts in a node_modules directory. We followed this guide: https://github.com/filamentgroup/grunticon
Thanks!
Update: Successfully installed npm 3 on TravisCI.
before_install:
- npm install -g npm#3.x-latest
Sadly, did not fix the issue.
In your Travis preinstall..
npm i -g npm#3
Npm 3 is in late beta, and will give you a much more flat directory structure.
Note: you will need to add any peer dependencies to your package.json

Resources