Webpacker: Warnings: has unmet peer dependency

[phlegx]

I use the latest Rails (5.1.4), Yarn (1.2.1) and Webpacker (3.0.2) version to test Vue. I have created a project with the following commands:

$ gem install bundler rails
$ rails new example_app --webpack=vue

I get this (4 has unmet peer dependency) warnings:

$ cd example_app
$ yarn install --check-files
yarn install v1.2.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "[email protected]" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning "[email protected]" has unmet peer dependency "css-loader@*".
warning "[email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "[email protected]" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[4/4] Building fresh packages...
Done in 8.07s.

My package.json looks like this:

{
  "name": "example_app",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.0.2",
    "coffeescript": "^2.0.2",
    "vue": "^2.5.2",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.2",
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.4"
  }
}

[gauravtiwari]

Please feel free to bump up/down your deps. We will try to lock down deps in next release 👍

[hovancik]

I'm trying the same (inside docker) and my install does not have bin/webpack-dev-server. Could it be caused by that? How to set deps correctly?

[hovancik]

@gauravtiwari is there a way to start a new project now or should I wait for next release? I'm trying rails webpacker:install and rails webpacker:install:vuebut I' always getting:

Webpack binstubs not found.
Have you run rails webpacker:install ?
Make sure the bin directory or binstubs are not included in .gitignore

[gauravtiwari]

@hovancik No, you can start one now. Is this a new project you are getting this error?

[hovancik]

Yep.

[gauravtiwari]

Could you please run? bundle binstubs webpacker --force before running rails webpacker:install:vue This command takes care of it though: rails webpacker:install

[hovancik]

Still nothing. Here is a repo with what I do (https://github.com/hovancik/rails_vue_test). You can check the commits and readme to see what's going on.

Interesting part is on README.md:350

Installing binstubs
         run  bundle binstubs webpacker from "."
Skipped webpack and webpack-dev-server since they already exist.

Thought webpack-dev-serveris not at ./bin

[laughingman-hass]

I suspect this PR#883, broke the creation of the binstubs (not confirmed). bundle binstubs wepacker doesn't create them even if you use the --force option.

However you should be able to run the webpack server with bundle exec webpack-dev-server

[hovancik]

I'm getting bundler: command not found: bin/webpack-dev-server. I don't think it's possible to run it without binary.

[laughingman-hass]

thats strange... hmm... you could try running bundle install --all this will generate all the binstubs for all gems in your gemfile. both this and running with bundle exec works on mac and linux (docker) env

[gauravtiwari]

BTW, have you set a different path for binstubs? http://bundler.io/v1.10/bundle_binstubs.html

If yes, use bundle exec webpack-dev-server and bundle exec webpack

[hovancik]

@gauravtiwari All that I did is in repo's readme, so nope.
@hass-laughingman bundle install --all yields Unknown switches '--all'

[laughingman-hass]

@gauravtiwari I do think there is a issue with the gem not generating binstubs on bundle binstubs webpacker --force I've tested this on a new rails project and on a clean linux environemnt

[laughingman-hass]

@hovancik sorry my bad... please try bundle install --binstubs

[hovancik]

@hass-laughingman that did work

[hovancik]

but not sure if it's ok, eg. rails binary was changed to:

bundle_binstub = File.expand_path("../bundle", __FILE__)
load(bundle_binstub) if File.file?(bundle_binstub)

require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
  Pathname.new(__FILE__).realpath)

require "rubygems"
require "bundler/setup"

load Gem.bin_path("railties", "rails")

from

  load File.expand_path('../spring', __FILE__)
rescue LoadError => e
  raise unless e.message.include?('spring')
end
APP_PATH = File.expand_path('../config/application', __dir__)
require_relative '../config/boot'
require 'rails/commands'

[gauravtiwari]

Yes, that's another way to generate but that would install/update all binstubs (some of it you may not want). Seems to work fine here:

rm -rf ./bin/webpack*
bundle binstubs webpacker

[gauravtiwari]

@hovancik Yes, that should be fine - probably you had an older version of Rails bin.

[hovancik]

I'm having gem 'rails', '~> 5.1.4' so they should be the latest, unless binstubs goes master or something

[hovancik]

@gauravtiwari when I run bundle binstubs webpacker , I'm getting:

Skipped webpack and webpack-dev-server since they already exist.
If you want to overwrite skipped stubs, use --force

They are not there, thought.

[gauravtiwari]

@hovancik Could you please pull in latest master and try again 👍

gem 'webpacker', github: 'rails/webpacker'

[stevenharman]

I've not a rather new webpacker install, running master of rails/webpacker, and even after a yarn upgrade I'm still seeing several peer dependency warnings. Is this expected?

◎ $ yarn                                                                                                                                                                                                                           [16:40:08]
yarn install v1.3.2
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "@rails/webpacker > [email protected]" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > [email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[5/5] 📃  Building fresh packages...
✨  Done in 2.74s.

[growthcode]

I was able to fix it after some guessing... I'm new to yarn but fixed 4 warnings including the one here.

[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@rails/webpacker > [email protected]" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > [email protected]" has unmet peer dependency "css-loader@*".
warning " > [email protected]" has unmet peer dependency "eslint-plugin-standard@>=3.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ [email protected]
✨  Done in 5.03s.

I'll list my fixes individually so you can see the pattern:

# 1) @rails/webpacker > [email protected]" has unmet peer dependency "caniuse-lite@^1.0.30000697".
bin/yarn add caniuse-lite@^1.0.30000697

# 2) warning " > [email protected]" has unmet peer dependency "css-loader@*".
bin/yarn upgrade css-loader -p

# 3) warning " > [email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
# 4) warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
yarn upgrade webpack@^2.2.0 || ^3.0.0

Be sure to use the appropriate dependency flags referenced in the warning, more info here:
https://yarnpkg.com/lang/en/docs/managing-dependencies/

After I ran those lines... I got what I spent hours trying to achieve... 0 warnings 😄 :

⇒  yarn install --check-files
yarn install v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
✨  Done in 7.45s.