Module not found: Error: Can't resolve 'stimulus'

[M. Rejka Permana]

I've this problem when I run
bundle add stimulus_reflex
and then, showing

Either add it to your package.json as a dependency or use "yarn link stimulus_reflex" if you are doing development.

If you know what you are doing and you want to start the application anyway,
you can create a StimulusReflex initializer with the command:

bundle exec rails generate stimulus_reflex:config

Then open your initializer at

<RAILS_ROOT>/config/initializers/stimulus_reflex.rb

and then add the following directive:

  StimulusReflex.configure do |config|
    config.on_failed_sanity_checks = :warn
  end

Exiting

I was ignore that, because I'm following the instruction on youtube video. And then, I run
rails stimulus:install
, and notice before get disappear.

When I tested, create a little code to trigger the method on exampleReflex. it doesnt works.
And I look up into server, and he tell me this.

Module not found: Error: Can't resolve 'stimulus' in '/home/rejka/project/rubyonrails/self/sample_project/todo-app/app/javascript/controllers'
 @ ./app/javascript/controllers/index.js 3:0-39 8:18-29
 @ ./app/javascript/packs/application.js

ERROR in ./app/javascript/controllers/application_controller.js
Module not found: Error: Can't resolve 'stimulus' in '/home/rejka/project/rubyonrails/self/sample_project/todo-app/app/javascript/controllers'
 @ ./app/javascript/controllers/application_controller.js 21:0-38 95:2-12
 @ ./app/javascript/controllers sync _controller\.js$
 @ ./app/javascript/controllers/index.js
 @ ./app/javascript/packs/application.js

ERROR in ./app/javascript/controllers/hello_controller.js
Module not found: Error: Can't resolve 'stimulus' in '/home/rejka/project/rubyonrails/self/sample_project/todo-app/app/javascript/controllers'
 @ ./app/javascript/controllers/hello_controller.js 29:0-38 50:2-12
 @ ./app/javascript/controllers sync _controller\.js$
 @ ./app/javascript/controllers/index.js
 @ ./app/javascript/packs/application.js

ERROR in ./node_modules/stimulus_reflex/javascript/stimulus_reflex.js
Module not found: Error: Can't resolve 'stimulus' in '/home/rejka/project/rubyonrails/self/sample_project/todo-app/node_modules/stimulus_reflex/javascript'
 @ ./node_modules/stimulus_reflex/javascript/stimulus_reflex.js 25:0-38 322:2-12
 @ ./app/javascript/controllers/index.js
 @ ./app/javascript/packs/application.js

ERROR in ./app/javascript/controllers/index.js
Module not found: Error: Can't resolve 'stimulus/webpack-helpers' in '/home/rejka/project/rubyonrails/self/sample_project/todo-app/app/javascript/controllers'
 @ ./app/javascript/controllers/index.js 4:0-66 12:17-39
 @ ./app/javascript/packs/application.js

Hope information below helpfull the solution/

package.json
{
  "name": "todo_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "stimulus": "^3.0.0",
    "stimulus_reflex": "^3.5.0-pre2",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^4.3.0"
  }
}

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.0.4', '>= 6.0.4.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem "nested_scaffold", "~> 1.1"
gem "stimulus_reflex", "~> 3.4"
gem "awesome_print", "~> 1.9"

config/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ["app/javascript/packs"]

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

[Marco Roth]

Hey @jusondac

This is an issue with the new Stimulus 3 release. I'm working on a fix to prevent that in the future.

There is a workaround for now: Please try to set your stimulus dependency to ^2.0.0 and run yarn install again.

Let me know if you run into any other issues. If so, it's probably easier to jump on Discord and discuss there. Thank you!

[M. Rejka Permana]

Alright, thank in advance @marcoroth , I'll be back for confirmation

[M. Rejka Permana]

@marcoroth its works!, thank you very much!!!

[Roman Tataurov]

Same issue with "@hotwired/stimulus" which start from version 3.

[Marco Roth]

@webhive make sure you also do yarn add stimulus

[Roman Tataurov]

I finally got another solution. Seems it resolving fine, but still testing if everything work well.

So idea is add alias to webpacker

Here is my ./config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const path = require('path')

environment.config.merge({
  resolve: {
    alias: {
      'stimulus': path.resolve(__dirname, '..', '..', 'node_modules/@hotwired/stimulus'),
    }
  }
})

// any other settings here

module.exports = environment```

[Marco Roth]

@webhive That works too, but there is no need for that.

If you have stimulus in your package.json it will automatically install @hotwired/stimulus with it.

[Marco Roth]

I'm going to close this since StimulusReflex 3.5 should be compatible with both @hotwired/stimulus and stimulus. Feel free to reopen this issue if you are still having issues. Thank you!