Webpacker: Webpacker dev server does not work in Rails 5

[JohnMerlino2]

Here is a basic Rails 5 showing Webpacker dev server does not work:

https://github.com/JohnMerlino2/WebpackerDoesNotWork

All I did to generate this app is:

rails new testapp --webpack=react
bundle
bundle exec rails webpacker:install

$ ./bin/webpack
yarn run v1.2.1
error Command "webpack" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$ ./bin/webpack-dev-server
module.js:515
throw err;
^

Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:513:15)
at Function.Module._load (module.js:463:25)
at Module.require (module.js:556:17)
at require (internal/module.js:11:18)
at Object. (/Users/merlino/projects/testapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:12:17)
at Module._compile (module.js:612:30)
at Object.Module._extensions..js (module.js:623:10)
at Module.load (module.js:531:32)
at tryModuleLoad (module.js:494:12)
at Function.Module._load (module.js:486:3)

What's going on?

[JohnMerlino2]

I noticed the error was coming from this line:
const webpack = require('webpack');

in this file:
node_modules/webpack-dev-server/bin/webpack-dev-server.js

Well, I looked in package.json, and found there was no webpack or webpack-cli. So I ran 'yarn add webpack webpack-cli --dev'. Then I got the next error:

Error: Cannot find module '@rails/webpacker'

This also was not in package.json.

I tried to add it:

yarn add @rails/webpacker --dev

I am getting these errors:

warning @rails/webpacker > postcss-preset-env > postcss-color-gray > postcss-values-parser > [email protected]: I wrote this module a very long time ago; you should use something else.
[2/4] 🚚 Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0".
error Found incompatible module

And

@rails/webpacker is NOT added to package.json.

So it seems the issue is wth @rails/webpacker?

[JohnMerlino2]

Instead of using yarn, I used npm and it installed with npm:

npm i @rails/webpacker

Keep in mind:

.bin/webpack-dev-server

will still not work. @ jakeNiemiec said a few days ago you cannot use webpack-cli with webpacker. They are both webpack wrappers.

Instead, call ./bin/webpack like you would for the cli.

So I try it:

./webpack
ERROR in ./app/javascript/packs/hello_react.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-react'

[JohnMerlino2]

It is complaining about:

at module.exports (/Users/merlino/projects/testapp/babel.config.js:39:9)

at this line:

    require('@babel/preset-react').default,

[JohnMerlino2]

Despite the fact that @babel/preset-react was in package.json, it was not in node_modules. After running

npm i @babel/preset-react

More issues with this webpacker install:

ERROR in ./app/javascript/packs/hello_react.jsx
Module not found: Error: Can't resolve 'prop-types'

ERROR in ./app/javascript/packs/hello_react.jsx
Module not found: Error: Can't resolve 'react'

ERROR in ./app/javascript/packs/hello_react.jsx
Module not found: Error: Can't resolve 'react-dom'

However, I do have react, react-dom and prop-types in node_modules. They are already installed.

[jakeNiemiec]

I think you have a bigger problem, I ran the same command and got:

Can you confirm that this is different than what you get?
Can you list your node -v and rails -v?

[JohnMerlino2]

I installed it via npm instead of yarn:

npm i react
npm i react-dom
npm i prop-types

And this time ./webpack does compile:

Built at: 07/09/2019 11:27:10 AM
Asset Size Chunks Chunk Names
js/application-2181adcc3224cdc0c9c1.js 4.72 KiB application [emitted] application
js/application-2181adcc3224cdc0c9c1.js.map 4.5 KiB application [emitted] application
js/hello_react-a6c625f717ecbb93e945.js 1010 KiB hello_react [emitted] hello_react
js/hello_react-a6c625f717ecbb93e945.js.map 1.14 MiB hello_react [emitted] hello_react

But yes there is a bigger problem. THis was an enormous amount of work, as you saw from my above comments to get this to compile.

[JohnMerlino2]

@jakeNiemiec I have the very skeletal Rails 5 app here with Webpacker that reproduces the issue:

https://github.com/JohnMerlino2/WebpackerDoesNotWork

Node and Rails versions provided:

$ node -v
v8.8.1
$ rails -v
Rails 5.2.3

In the original dummy app I linked to at my github account, you can see package.json:

{
  "name": "testapp",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.7.2"
  }
}

As you can see, my package.json did not have @rails/webpacker and babel-plugin-transform-react-remove-prop-types. rails-actioncable, rails-activestorage, rails/ujs and turbolinks I believe is irrelevant.

[JohnMerlino2]

Note when I do something like rails new testapp --webpack=react, I do notice these errors:

error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0".
error Found incompatible module

You think the big problem is yarn?

Because something is causing @rails/webpacker not to be in package.json, even though it seems to complete the application create, despite the above error.

[jakeNiemiec]

What version of webpackER do you have?
How did you install node?

You think the big problem is yarn?

No, it seems related to rails & webpacker.

[JohnMerlino2]

I am using Webpack 4.0.7 and I installed Node with Homebrew:

$ gem list | grep webpacker
webpacker (4.0.7)

$ brew ls --versions node
node 8.8.1
$ ls -l /usr/local/bin/node
lrwxr-xr-x  1 viggy  admin  29 Oct 29  2017 /usr/local/bin/node -> ../Cellar/node/8.8.1/bin/node

And the version of Rails is Rails 5.2.3. Yarn is version 1.2.1. NPM is version 5.4.2. macOS Mojave v 10.14.5. rvm version is rvm 1.29.7. @jakeNiemiec

[jakeNiemiec]

Installing node 10 may fix some of it: https://github.com/rails/webpacker/issues/2022#issuecomment-509741384

Additionally, there are known issues with how homebrew installs node. I recommend using nvm: https://github.com/nvm-sh/nvm#install--update-script (make sure you uninstall the brew version first)

[JohnMerlino2]

Yes, you appear to be correct. I uninstalled Node from brew, and then installed nvm and installed the latest Node version, 12.6.0, and then I installed Yarn from brew again (since I had to uninstall Yarn when I uninstalled Node from brew). Then I ran the following commands:

$ bundle exec rails webpacker:install
$ bundle exec rails webpacker:install:react

And I was able to run webpack server.

My additional note is I noticed that in the documentation on npmjs, they state that node 6 would work, but it did not for me on Mac OSX with Homebrew.

https://www.npmjs.com/package/@rails/webpacker#prerequisites

[amitsaxena]

I am facing the same issue with ~a fresh~ new (1 month old) rails 6 app which comes with webpacker pre-installed.
Below are the versions I am using:

Rails 6.0.0
yarn 1.19.0
node v12.11.0

This is what my package.json originally looked like:

{
  "name": "dawn",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "bulma": "^0.7.5",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-cli": "^3.3.9"
  }
}

And then I tried to manually in install webpack and webpack-cli but still get the error:

amit@Amits-MBP dawn (landing_pages) $ bin/webpack-dev-server 
internal/modules/cjs/loader.js:783
    throw err;
    ^

Error: Cannot find module '@rails/webpacker'
Require stack:
- /Users/amit/dawn/code/dawn/config/webpack/environment.js
- /Users/amit/dawn/code/dawn/config/webpack/development.js
- /Users/amit/dawn/code/dawn/node_modules/webpack-cli/bin/utils/convert-argv.js
- /Users/amit/dawn/code/dawn/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:780:15)
    at Function.Module._load (internal/modules/cjs/loader.js:685:27)
    at Module.require (internal/modules/cjs/loader.js:838:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/amit/dawn/code/dawn/config/webpack/environment.js:1:25)
    at Module._compile (internal/modules/cjs/loader.js:945:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:962:10)
    at Module.load (internal/modules/cjs/loader.js:798:32)
    at Function.Module._load (internal/modules/cjs/loader.js:711:12)
    at Module.require (internal/modules/cjs/loader.js:838:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/amit/dawn/code/dawn/config/webpack/environment.js',
    '/Users/amit/dawn/code/dawn/config/webpack/development.js',
    '/Users/amit/dawn/code/dawn/node_modules/webpack-cli/bin/utils/convert-argv.js',
    '/Users/amit/dawn/code/dawn/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}

package.json

{
  "name": "dawn",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "bulma": "^0.7.5",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.1",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  }
}

[amitsaxena]

Looks like I figured it out by creating a new rails app and comparing the package.json file. It was happening because of the missing dependency:
"@rails/webpacker": "^4.0.7",

Now I am not sure if rails didn't add that to package.json or I removed it initially, but adding that seems to resolve the error. Adding here hoping it could be of help to someone.

[fikrikarim]

@amitsaxena Holy.. dude I stuck on this for one hour. Thanks for helping!

[amitsaxena]

@fikrikarim glad that I could be of help! :)

[nsoseka]

If anyone is facing this issue, you can also try updating your modules
yarn install --check-files
if you using yarn

[jdmartinez1062]

Having the same issue, the problem is it happens every time I create a new app. Each time, Rails will create a package.json without @rails/webpacker. Checking files with yarn doesn't do anything. The package.json created in a bare-bones app.

{
  "name": "TEST1",
  "private": true,
  "dependencies": {
    "@rails/ujs": "^6.0.0",
    "turbolinks": "^5.2.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/actioncable": "^6.0.0"
  },
  "version": "0.1.0"
}

I have one app, let's call it A, that works without it, which is very weird since it shouldn't but then again all the other apps that work have it. Also, I started to get this issue after I finished working on A. The solutions I found:

• @rails/webpacker manually to your package.json

• do as @JohnMerlino2 , npm i @rails/webpacker

This is happening in Rails 6

[ohboyd]

@jdmartinez1062 This same case is true for me too. On a rails 6 application and for some reason, the rails new command doesn't add that to the package.json. Just did npm i @rails/webpacker and that helped me to fix the problem.