bin/webpack-dev-server and bin/webpack does not exists, upon following steps on the Getting Started guide

[KarlHeitmann]

Hi!

After following the steps here to get started, when I tried tu run bin/dev I got the following error

unknown command: bin/webpacker-dev-server
sh: bin/webpacker: No such file or directory

I checked the bin/ folder and this is what I've got: no webpacker* files:

The stack I'm using is:

1. Ruby version: 3.2.2
2. Rails version: 7.0.6
3. Webpacker version: ?? on package.json: webpack: 5
4: Shakapacker: 7.0.2
5. React on Rails version: 13.3.5

This is not the first time I ran with this issue. The first time I followed the getting started guide, I ran the command with the --strict flag. As told on the getting started guide. But upon running the 4th step command: rails generate react_on_rails:install I noticed this bug on the final message: The same command to run with HMR and without HMR:

NOTE:
I took a look at the source code and found this was fixed on commit: 86c327bf4efbd6c446502b12ad77fc1ecabeca0e 02/24/2023, and the --strictflag had me installedreact_on_rails version 13.3.0. Then I ran the bin/devcommand and the application crashed because it couldn't found neitherwebpackernorwebpacker-dev-server. So I went to another folder and run the commands described on the getting started guide again but without the --strictflag, and when the moment came to run thebin/devcommand it couldn't found thewebpacker` executable files. That's when I decided to open a new issue on the repository and came here.

Best

[ahangarha]

Sorry for the inconvenience.
We are about to make a new release for Shakapacker 7 support #1548.

You may wait for 2-3 more days otherwise, these are the options:

• manually update several files to match Shakapacker 7
• downgrade your Shakapacker to version 6 and run the installation process again

cc @justin808

[KarlHeitmann]

Sorry for the inconvenience. We are about to make a new release for Shakapacker 7 support #1548.

You may wait for 2-3 more days otherwise, these are the options:

* manually update several files to match Shakapacker 7

* downgrade your Shakapacker to version 6 and run the installation process again

cc @justin808

Thanks, but I am not in a hurry, I just was curious and wanted to use the tool and found the bug. I just wanted to mention it here in case it was not yet reported :)

[ahangarha]

Thanks again for sharing the issue with us, and sorry again for the inconvenience.

[arman-h]

Apologies for re-openning an old thread, but I'm having this exact issue with recent version of the gem.

My environment:

ruby -v - ruby 3.3.1 (2024-04-23 revision c56cd86388) [x86_64-linux]
rails -v - Rails 7.1.3.4
node -v - v22.2.0
npm -v - 10.7.0

I followed the setup tutorial exactly step by step:

rails new test-react-on-rails --skip-javascript
cd test-react-on-rails
bundle add react_on_rails --strict
bundle add shakapacker --strict
bundle exec rails shakapacker:install
git commit -am "Initial commit"
rails generate react_on_rails:install
EXECJS_RUNTIME=Node

Then running ./bin/dev returns the same error as reported in this discussion:

wp-client | /tmp/overmind-test-react-on-rails-3OxoDICLbckhiTTUvditj/wp-client: 4: bin/webpacker-dev-server: not found
wp-server | /tmp/overmind-test-react-on-rails-3OxoDICLbckhiTTUvditj/wp-server: 4: bin/webpacker: not found
wp-client | Exited with code 127
wp-server | Exited with code 127
rails     | Interrupting...
rails     | [WARNING] Could not load command "rails/commands/server/server_command". Error: .

Additional Context

Installing bundle add react_on_rails --strict downgraded the gem: Using react_on_rails 14.0.0 (was 14.0.2)

Output from bundle exec rails shakapacker:install:

       apply  /home/arman/.asdf/installs/ruby/3.3.1/lib/ruby/gems/3.3.0/gems/shakapacker-8.0.0/lib/install/template.rb
      create    config/shakapacker.yml
  Copying webpack core config
      create    config/webpack
      create    config/webpack/webpack.config.js
  Creating packs app source directory
      create    app/javascript/packs
      create    app/javascript/packs/application.js
       apply    /home/arman/.asdf/installs/ruby/3.3.1/lib/ruby/gems/3.3.0/gems/shakapacker-8.0.0/lib/install/binstubs.rb
    Copying binstubs
       exist      bin
      create      bin/shakapacker
      create      bin/shakapacker-dev-server
      create      bin/yarn
      append    .gitignore
  Add JavaScript include tag in application layout
      insert    app/views/layouts/application.html.erb
  Run npm install during bin/setup
      insert    bin/setup
  Installing shakapacker@8.0.0

added 532 packages, and audited 533 packages in 38s

82 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
  Adding shakapacker peerDependencies

added 14 packages, removed 8 packages, changed 16 packages, and audited 539 packages in 2s

78 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
  Installing webpack-dev-server for live reloading as a development dependency
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 7 packages, removed 43 packages, changed 13 packages, and audited 503 packages in 1s

53 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
         run  bundle install
Bundle complete! 13 Gemfile dependencies, 86 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

Running rails generate react_on_rails:install causes several conflicts listed below, and for all of these, I chose to overwrite with the installer's version.

Conflict in config/webpack/webpack.config.js with this diff:

--- /home/arman/Desktop/test2/test-react-on-rails/config/webpack/webpack.config.js	2024-06-16 18:55:45.789357146 +0400
+++ /home/arman/Desktop/test2/test-react-on-rails/config/webpack/webpack.config.js20240616-45666-qhiij9	2024-06-16 18:59:07.235301622 +0400
@@ -1,6 +1,15 @@
-// See the shakacode/shakapacker README and docs directory for advice on customizing your webpackConfig.
-const { generateWebpackConfig } = require('shakapacker')
+const { env } = require('shakapacker')
+const { existsSync } = require('fs')
+const { resolve } = require('path')
 
-const webpackConfig = generateWebpackConfig()
+const envSpecificConfig = () => {
+  const path = resolve(__dirname, `${env.nodeEnv}.js`)
+  if (existsSync(path)) {
+    console.log(`Loading ENV specific webpack configuration file ${path}`)
+    return require(path)
+  } else {
+    throw new Error(`Could not find file to load ${path}, based on NODE_ENV`)
+  }
+}
 
-module.exports = webpackConfig
+module.exports = envSpecificConfig()

Conflict in config/shakapacker.yml with this diff:

--- /home/arman/Desktop/test2/test-react-on-rails/config/shakapacker.yml	2024-06-16 18:55:45.789357146 +0400
+++ /home/arman/Desktop/test2/test-react-on-rails/config/shakapacker.yml20240616-45666-xfj338	2024-06-16 19:00:46.437231577 +0400
@@ -1,99 +1,43 @@
 # Note: You must restart bin/shakapacker-dev-server for changes to take effect
-# This file contains the defaults used by shakapacker.
 
 default: &default
   source_path: app/javascript
-
-  # You can have a subdirectory of the source_path, like 'packs' (recommended).
-  # Alternatively, you can use '/' to use the whole source_path directory.
-  # Notice that this is a relative path to source_path
   source_entry_path: packs
-
-  # If nested_entries is true, then we'll pick up subdirectories within the source_entry_path.
-  # You cannot set this option to true if you set source_entry_path to '/'
-  nested_entries: true
-
-  #  While using a File-System-based automated bundle generation feature, miscellaneous warnings suggesting css order
-  #  conflicts may arise due to the mini-css-extract-plugin. For projects where css ordering has been mitigated through
-  #  consistent use of scoping or naming conventions, the css order warnings can be disabled by setting
-  #  css_extract_ignore_order_warnings to true
-  css_extract_ignore_order_warnings: false
-
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/shakapacker
   webpack_compile_output: true
-  # See https://github.com/shakacode/shakapacker#deployment
-  shakapacker_precompile: true
 
-  # Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
-  # manifest_path: public/packs/manifest.json
-
-  # Additional paths webpack should look up modules
+  # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
   additional_paths: []
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
-  # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
-  webpack_loader: 'babel'
-
-  # Raises an error if there is a mismatch in the shakapacker gem and npm package being used
-  ensure_consistent_versioning: true
-
-  # Select whether the compiler will use SHA digest ('digest' option) or most most recent modified timestamp ('mtime') to determine freshness
-  compiler_strategy: digest
-
-  # Select whether the compiler will always use a content hash and not just in production
-  # Don't use contentHash except for production for performance
-  # https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
-  useContentHash: false
-
-  # Setting the asset host here will override Rails.application.config.asset_host.
-  # Here, you can set different asset_host per environment. Note that
-  # SHAKAPACKER_ASSET_HOST will override both configurations.
-  # asset_host: custom-path
-
 development:
   <<: *default
-  compile: true
-  compiler_strategy: mtime
+  # This is false since we're running `bin/shakapacker -w` in Procfile.dev-static
+  compile: false
 
   # Reference: https://webpack.js.org/configuration/dev-server/
-  # Keys not described there are documented inline and in https://github.com/shakacode/shakapacker/
   dev_server:
-    # For running dev server with https, set `server: https`.
-    # server: https
-
+    https: false
     host: localhost
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
-    # Used instead of the `hot` key in https://webpack.js.org/configuration/dev-server/#devserverhot
-    hmr: false
-    # If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
-    # that you add style-loader to your project dependencies.
-    #
-    # If you want to instead deliver CSS via <link> with the mini-css-extract-plugin, set inline_css to false.
-    # In that case, style-loader is not needed as a dependency.
-    #
-    # mini-css-extract-plugin is a required dependency in both cases.
-    inline_css: true
-    # Defaults to the inverse of hmr. Uncomment to manually set this.
-    # live_reload: true
+    hmr: true
     client:
       # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
       overlay: true
       # May also be a string
       # webSocketURL:
-      #  hostname: '0.0.0.0'
-      #  pathname: '/ws'
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
       #  port: 8080
-    # Should we use gzip compression?
     compress: true
     # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
-    allowed_hosts: 'auto'
-    # Shows progress and colorizes output of bin/shakapacker[-dev-server]
+    allowed_hosts: [ 'localhost' ]
     pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
@@ -114,8 +58,5 @@
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
-  # Use content hash for naming assets. Cannot be overridden by for production.
-  useContentHash: true
-
   # Cache manifest.json for performance
   cache_manifest: true

The node_modules directory does exist. The bin directory contains:

bundle*
dev*
dev-static*
docker-entrypoint*
rails*
rake*
setup*
shakapacker*
shakapacker-dev-server*
yarn*

package.json looks like this:

{
  "packageManager": "npm@10.7.0",
  "name": "app",
  "private": true,
  "version": "0.1.0",
  "babel": {
    "presets": [
      "./node_modules/shakapacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ],
  "dependencies": {
    "@babel/core": "^7.24.7",
    "@babel/plugin-transform-runtime": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@babel/runtime": "^7.24.7",
    "@types/babel__core": "^7.20.5",
    "@types/webpack": "^5.28.5",
    "babel-loader": "^8.3.0",
    "compression-webpack-plugin": "^9.2.0",
    "shakapacker": "8.0.0",
    "terser-webpack-plugin": "^5.3.10",
    "webpack": "^5.92.0",
    "webpack-assets-manifest": "^5.2.1",
    "webpack-cli": "^4.10.0",
    "webpack-merge": "^5.10.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^4.15.2"
  }
}

[justin808]

@arman-h we renamed all "webpacker" to "shakapacker", so the bin files have changed names.

[Raduh]

I am having the same issue — followed the instructions step by step and ./bin/dev is crashing because it cannot find webpack...