webpacker: bin/webpack-dev-server results in Cannot find module 'webpack-cli/bin/config-yargs'

In webpack 4.0.1 we need to run yarn add webpack-cli -D and it works!!!

I think this is broken, because the package.json that comes with a fresh install gives me:

  "devDependencies": {
    "webpack-dev-server": "^3.1.0"
  }

But meanwhile, webpack-dev-server from 3.0.0 on claims that:

Breaking change: webpack v4 is now supported. Older versions of webpack are not supported.

https://github.com/webpack/webpack-dev-server/releases/tag/v3.0.0

EDIT: Doing yarn add webpack-dev-server@^2.11.1 fixed it for me.

Please run: yarn add webpack-dev-server@^2.11.1

Hi @tuteurprive, welcome!

You may be assuming that Rails works the same way as Node projects. But Rails is slightly different in a better way. Here is an incomplete checklist:

1. Do you have gem "webpacker" at your Gemfile?
2. At your route.rb, do you have a root? If you don’t, please copy and paste it. If you do, move on.

root "pages#index"

1. At your root page, in this case, app/views/pages/index.html.erb, do you have <%= javascript_packs_tag "something"%>

2a if you do not have a root, but want to generate a "pages" simply run rails g scaffold pages and follow by rails db:migrate

1. If 1 +2 are ok, then run rails server to get the Rails server running. note: it’s not yarn run dev.

Visit http://localhost:3000 and you should have something working.

---

Alternatively, start a fresh project by typing these at your terminal.

rails new app --webpack=vue
rails g scaffold pages
rails db:migrate

At app/views/pages/index.html.erb replace all the text with <%= javascript_packs_tag "hello_vue" %>

At route.rb, make sure you have this.

root "pages#index" 

Run rails server and visit http://localhost:3000

Let me know if it works. Alternatively, you should post to stackoverflow.com and tag it as webpacker.

Try: yarn add webpack-dev-server@2.11.1

In webpack 4.0.1 we need to run yarn add webpack-cli -D and it works!!!

Why it is not in docs?

@icechenfei First add npx webpack-cli and then run npm run start. In your package.json add "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "start": "webpack-dev-server" }

Webpacker doesn’t support/ship with webpack 4.0 at the moment. Will update docs once this is done.

I had the same issues, however, none of the above solutions worked. I ended up patching a bit the DevServerRunner to use the now standard webpack serve instead of webpack-dev-server:

diff --git a/lib/webpacker/dev_server_runner.rb b/lib/webpacker/dev_server_runner.rb
index be5557b..978c13a 100644
--- a/lib/webpacker/dev_server_runner.rb
+++ b/lib/webpacker/dev_server_runner.rb
@@ -66,9 +66,9 @@ module Webpacker
         env["WEBPACKER_CONFIG"] = @webpacker_config
 
         cmd = if node_modules_bin_exist?
-          ["#{@node_modules_bin_path}/webpack-dev-server"]
+          ["#{@node_modules_bin_path}/webpack", "serve"]
         else
-          ["yarn", "webpack-dev-server"]
+          ["yarn", "webpack", "serve"]
         end
 
         if @argv.include?("--debug-webpacker")
@@ -85,7 +85,7 @@ module Webpacker
       end
 
       def node_modules_bin_exist?
-        File.exist?("#{@node_modules_bin_path}/webpack-dev-server")
+        File.exist?("#{@node_modules_bin_path}/webpack")
       end
   end
 end

Works like a charm 😃

---

For rbenv users, here’s how to find where to apply the patch (be careful, this will be changed for every projects!):

cd $(rbenv prefix)
rg DevServerRunner

isn’t work with added as development

"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"

@olivierlacan Thanks for filing the issue. It seems like dev server 3.0.0 doesn’t work with older versions of webpack - https://github.com/webpack/webpack-dev-server/releases

We need to update webpacker so it supports webpack v4.

hello ytbryan !

Many thanks for your help ! It’s really reassuring to see that one can get such precise help ! I have followed your suggestions (together with a friend of mine who is lot more experienced in coding) and it worked. I think webpacker was not properly installed / working !

Many thanks, problem solved !

Best !