Webpacker: ActionView Template error

[PAMulligan]

I'm attempting to implement the sample project listed here: https://medium.com/statuscode/introducing-webpacker-7136d66cddfb#.pmjvktyhm. When I run the server, I'm getting an ActionView error saying "undefined local variable or method 'counter'. My ./views/pages/index.html.erb looks like this:

<div class=”counter-wrapper”>
  <h1>Counter</h1>
  <form class=’counter’>
  <button id=’increment’>Increment</button>
  <input type=”number” name=”counter” id='counter' value='0' />
  <button id=’decrement’>Decrement</button>
  </form>
</div>
<%= javascript_pack_tag ‘counter’ %>

In ./javascript/counter, I have two files, index.js and counter.js. Counter.js looks like this:

// A simple counter example
// The setup will be more complicated in modern apps built using React

const incrementNode = document.getElementById('increment');
const decrementNode = document.getElementById('decrement');
const inputNode = document.getElementById('counter');

const counter = {
  initialize() {
    incrementNode.addEventListener('click', (event) => {
      event.preventDefault();
      const currentValue = inputNode.value;
      inputNode.value = parseInt(currentValue, 0) + 1;
    });

    decrementNode.addEventListener('click', (event) => {
      event.preventDefault();
      const currentValue = inputNode.value;
      if (currentValue > 0) {
        inputNode.value = parseInt(currentValue, 0) - 1;
      }
    });
  }
};

export default counter;

And index.js looks like this:

import counter from './counter';

document.addEventListener('DOMContentLoaded', () => {
  counter.initialize();
});

In ./javascript/packs, I have counter.js:

import '../counter';

And my only route is "pages#index"

I have installed webpacker, and installed the React option. I've also compiled my webpacker assets. Lastly, my Gemfile looks like:

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.0.rc1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', github: "rails/sass-rails"

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# 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.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

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]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13.0'
  gem 'selenium-webdriver'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 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'
  gem 'foreman'
end

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

Any idea why I'm getting this 500?

[ytbryan]

do you have the project on github?

[PAMulligan]

Just the master branch, but not any of the counter implementation. I can push that branch tomorrow though, and share it.

[gauravtiwari]

@PAMulligan The quotes inside erb template looks wrong. May be it's because of that?

<div class="counter-wrapper">
    <h1>Counter (vanilla js)</h1>
    <form class='counter'>
      <input type="number" name="counter" id='counter' value='0' />
      <button id='increment'>Increment</button>
      <button id='decrement'>Decrement</button>
    </form>
   <%= javascript_pack_tag 'counter' %>
</div>

[ytbryan]

yeah it's the quotes. I reproduced it on a sample project. Try to copy the code written by Gaurav instead. let us know if it fixes it. If it does, please consider closing this issue.

[PAMulligan]

That seems right, I'll close it and re-open it if that doesn't do the trick.

[PAMulligan]

I replaced the suspect apostrophes, but no luck. I first turned all apostrophes to ", then to ', and recompiled after both of those times, but I'm still getting the same error message.

[ytbryan]

I see. There are two more things you can try.

1) instead of replacing just the suspected apostrophes, can you copy the entire Gaurav's code, select all and paste it entirely to your affected view. This way you are eliminating any bug in the page. I have copy Gaurav's code below:

<div class="counter-wrapper">
    <h1>Counter (vanilla js)</h1>
    <form class='counter'>
      <input type="number" name="counter" id='counter' value='0' />
      <button id='increment'>Increment</button>
      <button id='decrement'>Decrement</button>
    </form>
   <%= javascript_pack_tag 'counter' %>
</div>

2) if you have that project online, can you share it? We can send you a PR

[gauravtiwari]

Or get rid of everything and add it step by step manually :)

[PAMulligan]

@ytbryan Copy-pasting fixed it, thank you!

@gauravtiwari Thanks for writing the guide!

[Ifegwu]

I an seeing this error in my command line when i run ./bin/server:

13:19:46 web.1 | Error:
13:19:46 web.1 | PagesControllerTest#test_should_get_index:
13:19:46 web.1 | NameError: undefined local variable or method pages_index_URL' for #<PagesControllerTest:0x007fffd1b6b1c8> 13:19:46 web.1 | test/controllers/pages_controller_test.rb:5:inblock in '

Please what can I do to solve this error?

[gauravtiwari]

Do you have code somewhere on github? Have you defined the route correctly? It's coming from pages_controller_test.rb. Please check config/routes.rb file.

[Ifegwu]

Dear Gaurav, thanks for your quick response. I checked my config/routes.rb. This time arround the error has disappeared, but the hot reload terminates.
My git repo: https://github.com/Ifegwu/soft_work.git

Take a look at my console:
14:14:49 web.1 | started with pid 1799
14:14:49 hot.1 | started with pid 1800
14:14:52 hot.1 | Project is running at http://localhost:8089/
14:14:52 hot.1 | webpack output is served from /
14:14:52 hot.1 | Content not from webpack is served from /home/daniel/soft_work/public/packs
14:14:53 hot.1 | (node:1804) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
14:14:53 hot.1 | parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
14:14:57 hot.1 | Hash: e92bfc02ca06b5ec4bf6
14:14:57 hot.1 | Version: webpack 2.3.2
14:14:57 hot.1 | Time: 5062ms
14:14:57 hot.1 | Asset Size Chunks Chunk Names
14:14:57 hot.1 | hello_react.js 1.11 MB 0 [emitted] [big] hello_react
14:14:57 hot.1 | counter.js 343 kB 1 [emitted] [big] counter
14:14:57 hot.1 | application.js 342 kB 2 [emitted] [big] application
14:14:57 hot.1 | hello_react.js.map 1.23 MB 0 [emitted] hello_react
14:14:57 hot.1 | counter.js.map 377 kB 1 [emitted] counter
14:14:57 hot.1 | application.js.map 376 kB 2 [emitted] application
14:14:57 hot.1 | chunk {0} hello_react.js, hello_react.js.map (hello_react) 1 MB [entry] [rendered]
14:14:57 hot.1 | [48] (webpack)-dev-server/client?http://localhost:8089 5.44 kB {0} {1} {2} [built]
14:14:57 hot.1 | [64] ./~/punycode/punycode.js 14.7 kB {0} {1} {2} [built]14:14:57 hot.1 | [67] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [74] ./~/sockjs-client/lib/entry.js 244 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [100] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [102] ./~/url/url.js 23.3 kB {0} {1} {2} [built]
14:14:57 hot.1 | [103] ./~/url/util.js 314 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [104] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} {2} [built]
14:14:57 hot.1 | [105] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [107] (webpack)/hot/emitter.js 77 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [166] ./app/javascript/packs/hello_react.js 2.72 kB {0} [built]
14:14:57 hot.1 | [181] ./~/react-dom/index.js 59 bytes {0} [built]
14:14:57 hot.1 | [195] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
14:14:57 hot.1 | [264] ./~/react/react.js 56 bytes {0} [built]
14:14:57 hot.1 | [267] multi (webpack)-dev-server/client?http://localhost:8089 ./app/javascript/packs/hello_react.js 40 bytes {0} [built]
14:14:57 hot.1 | + 247 hidden modules
14:14:57 hot.1 | chunk {1} counter.js, counter.js.map (counter) 302 kB [entry] [rendered]
14:14:57 hot.1 | [48] (webpack)-dev-server/client?http://localhost:8089 5.44 kB {0} {1} {2} [built]
14:14:57 hot.1 | [58] ./~/events/events.js 8.33 kB {0} {1} {2} [built]
14:14:57 hot.1 | [60] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [67] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [74] ./~/sockjs-client/lib/entry.js 244 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [100] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [102] ./~/url/url.js 23.3 kB {0} {1} {2} [built]
14:14:57 hot.1 | [103] ./~/url/util.js 314 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [104] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} {2} [built]
14:14:57 hot.1 | [105] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [107] (webpack)/hot/emitter.js 77 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [135] ./app/javascript/counter/counter.js 874 bytes {1} [built]
14:14:57 hot.1 | [136] ./app/javascript/counter/index.js 347 bytes {1} [built]
14:14:57 hot.1 | [165] ./app/javascript/packs/counter.js 105 bytes {1} [built]
14:14:57 hot.1 | [266] multi (webpack)-dev-server/client?http://localhost:8089 ./app/javascript/packs/counter.js 40 bytes {1} [built]
14:14:57 hot.1 | + 73 hidden modules
14:14:57 hot.1 | chunk {2} application.js, application.js.map (application) 301 kB [entry] [rendered]
14:14:57 hot.1 | [48] (webpack)-dev-server/client?http://localhost:8089 5.44 kB {0} {1} {2} [built]
14:14:57 hot.1 | [55] ./~/ansi-html/index.js 4.26 kB {0} {1} {2} [built]
14:14:57 hot.1 | [56] ./~/ansi-regex/index.js 135 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [58] ./~/events/events.js 8.33 kB {0} {1} {2} [built]
14:14:57 hot.1 | [60] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [64] ./~/punycode/punycode.js 14.7 kB {0} {1} {2} [built]14:14:57 hot.1 | [74] ./~/sockjs-client/lib/entry.js 244 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [100] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [102] ./~/url/url.js 23.3 kB {0} {1} {2} [built]
14:14:57 hot.1 | [103] ./~/url/util.js 314 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [104] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} {2} [built]
14:14:57 hot.1 | [105] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [107] (webpack)/hot/emitter.js 77 bytes {0} {1} {2} [built]
14:14:57 hot.1 | [164] ./app/javascript/packs/application.js 504 bytes {2} [built]
14:14:57 hot.1 | [265] multi (webpack)-dev-server/client?http://localhost:8089 ./app/javascript/packs/application.js 40 bytes {2} [built]
14:14:57 hot.1 | + 71 hidden modules
14:14:57 hot.1 | webpack: Compiled successfully.
14:15:20 web.1 | Run options: --seed 61217
14:15:20 web.1 |
14:15:20 web.1 | # Running:
14:15:20 web.1 |
14:15:20 web.1 | .
14:15:20 web.1 |
14:15:20 web.1 | Finished in 1.794614s, 0.5572 runs/s, 0.5572 assertions/s.
14:15:20 web.1 |
14:15:20 web.1 | 1 runs, 1 assertions, 0 failures, 0 errors, 0 skips
14:15:20 web.1 | exited with code 0
14:15:20 system | sending SIGTERM to all processes
14:15:20 hot.1 | terminated by SIGTERM

Below is the error I see in Chrome console browser:

Uncaught TypeError: Cannot read property 'addEventListener' of counter.js:10 null
    at Object.initialize (counter.js:10)
    at HTMLDocument.<anonymous> (index.js:5)
initialize @ counter.js:10
(anonymous) @ index.js:5

[ytbryan]

@Ifegwu Just a note. You are using an old config/webpack structure. Therefore, it might be worthwhile to try the new webpacker 1.1 instead.

[Ifegwu]

@ytbryan, @gauravtiwari after updating from webpacker 1.0 to 1.1, bellow is error I am seeing:

15:52:07 web.1 | started with pid 408
15:52:07 hot.1 | started with pid 409
15:53:52 hot.1 | Project is running at http://localhost:8080/
15:53:52 hot.1 | webpack output is served from /
15:53:52 hot.1 | Content not from webpack is served from /home/daniel/soft_work/public/packs
15:54:13 hot.1 | (node:413) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
15:54:13 hot.1 | parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
15:54:20 hot.1 | Hash: 5f29d164b2de026dbe19
15:54:20 hot.1 | Version: webpack 2.3.2
15:54:20 hot.1 | Time: 28057ms
15:54:20 hot.1 | Asset Size Chunks Chunk Names
15:54:20 hot.1 | hello_react.js 1.11 MB 0 [emitted] [big] hello_react
15:54:20 hot.1 | counter.js 343 kB 1 [emitted] [big] counter
15:54:20 hot.1 | application.js 342 kB 2 [emitted] [big] application
15:54:20 hot.1 | hello_react.js.map 1.23 MB 0 [emitted] hello_react
15:54:20 hot.1 | counter.js.map 377 kB 1 [emitted] counter
15:54:20 hot.1 | application.js.map 376 kB 2 [emitted] application
15:54:20 hot.1 | chunk {0} hello_react.js, hello_react.js.map (hello_react) 1 MB [entry] [rendered]
15:54:20 hot.1 | [48] (webpack)-dev-server/client?http://localhost:8080 5.44 kB {0} {1} {2} [built]
15:54:20 hot.1 | [64] ./~/punycode/punycode.js 14.7 kB {0} {1} {2} [built]
15:54:20 hot.1 | [67] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [74] ./~/sockjs-client/lib/entry.js 244 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [100] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [102] ./~/url/url.js 23.3 kB {0} {1} {2} [built]
15:54:20 hot.1 | [103] ./~/url/util.js 314 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [104] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} {2} [built]
15:54:20 hot.1 | [105] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [107] (webpack)/hot/emitter.js 77 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [166] ./app/javascript/packs/hello_react.js 2.72 kB {0} [built]
15:54:20 hot.1 | [181] ./~/react-dom/index.js 59 bytes {0} [built]
15:54:20 hot.1 | [195] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
15:54:20 hot.1 | [264] ./~/react/react.js 56 bytes {0} [built]
15:54:20 hot.1 | [267] multi (webpack)-dev-server/client?http://localhost:8080 ./app/javascript/packs/hello_react.js 40 bytes {0} [built]
15:54:20 hot.1 | + 247 hidden modules
15:54:20 hot.1 | chunk {1} counter.js, counter.js.map (counter) 302 kB [entry] [rendered]
15:54:20 hot.1 | [48] (webpack)-dev-server/client?http://localhost:8080 5.44 kB {0} {1} {2} [built]
15:54:20 hot.1 | [58] ./~/events/events.js 8.33 kB {0} {1} {2} [built]
15:54:20 hot.1 | [60] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [67] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [74] ./~/sockjs-client/lib/entry.js 244 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [100] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [102] ./~/url/url.js 23.3 kB {0} {1} {2} [built]
15:54:20 hot.1 | [103] ./~/url/util.js 314 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [104] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} {2} [built]
15:54:20 hot.1 | [105] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [107] (webpack)/hot/emitter.js 77 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [135] ./app/javascript/counter/counter.js 874 bytes {1} [built]
15:54:20 hot.1 | [136] ./app/javascript/counter/index.js 347 bytes {1} [built]
15:54:20 hot.1 | [165] ./app/javascript/packs/counter.js 105 bytes {1} [built]
15:54:20 hot.1 | [266] multi (webpack)-dev-server/client?http://localhost:8080 ./app/javascript/packs/counter.js 40 bytes {1} [built]
15:54:20 hot.1 | + 73 hidden modules
15:54:20 hot.1 | chunk {2} application.js, application.js.map (application) 301 kB [entry] [rendered]
15:54:20 hot.1 | [48] (webpack)-dev-server/client?http://localhost:8080 5.44 kB {0} {1} {2} [built]
15:54:20 hot.1 | [55] ./~/ansi-html/index.js 4.26 kB {0} {1} {2} [built]
15:54:20 hot.1 | [56] ./~/ansi-regex/index.js 135 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [58] ./~/events/events.js 8.33 kB {0} {1} {2} [built]
15:54:20 hot.1 | [60] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [64] ./~/punycode/punycode.js 14.7 kB {0} {1} {2} [built]
15:54:20 hot.1 | [74] ./~/sockjs-client/lib/entry.js 244 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [100] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [102] ./~/url/url.js 23.3 kB {0} {1} {2} [built]
15:54:20 hot.1 | [103] ./~/url/util.js 314 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [104] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} {2} [built]
15:54:20 hot.1 | [105] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [107] (webpack)/hot/emitter.js 77 bytes {0} {1} {2} [built]
15:54:20 hot.1 | [164] ./app/javascript/packs/application.js 504 bytes {2} [built]
15:54:20 hot.1 | [265] multi (webpack)-dev-server/client?http://localhost:8080 ./app/javascript/packs/application.js 40 bytes {2} [built]
15:54:20 hot.1 | + 71 hidden modules
15:54:20 hot.1 | webpack: Compiled successfully.
15:54:29 web.1 | Run options: --seed 9293
15:54:29 web.1 |
15:54:29 web.1 | # Running:
15:54:29 web.1 |
15:54:29 web.1 | E
15:54:29 web.1 |
15:54:29 web.1 | Error:
15:54:29 web.1 | PagesControllerTest#test_should_get_index:
15:54:29 web.1 | ActionView::Template::Error: Can't find counter.js in /home/daniel/soft_work/public/packs/manifest.json. Is webpack still compiling?
15:54:29 web.1 | app/views/pages/index.html.erb:9:in _app_views_pages_index_html_erb__1882284859319259327_70368225170900' 15:54:29 web.1 | test/controllers/pages_controller_test.rb:5:inblock in '
15:54:29 web.1 |
15:54:29 web.1 | bin/rails test test/controllers/pages_controller_test.rb:4
15:54:29 web.1 |
15:54:29 web.1 |
15:54:29 web.1 |
15:54:29 web.1 | Finished in 7.589763s, 0.1318 runs/s, 0.0000 assertions/s.
15:54:29 web.1 |
15:54:29 web.1 | 1 runs, 0 assertions, 0 failures, 1 errors, 0 skips
15:54:30 web.1 | exited with code 1
15:54:30 system | sending SIGTERM to all processes
15:54:30 hot.1 | terminated by SIGTERM

Any help is appreciated, thanks.

[gauravtiwari]

@Ifegwu Did you try reloading after compilation?

[Ifegwu]

@gauravtiwari, yes I did. But the new error keep coming up. Kindly check my git repo: https://github.com/Ifegwu/soft_work.git to see where I got it wrong. Thanks for your time.

[Ifegwu]

@gauravtiwari, with bin/rails s, the code renders in the browser. But the increment/decrement button does not function as it supposed to. I think webpack is finding it deficult to compile an error in counter.js:10, according to the error I got from my console. Please take a look at this:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at Object.initialize (counter.js:10)
    at HTMLDocument.<anonymous> (index.js:5)
initialize @ counter.js:10
(anonymous) @ index.js:5

Thanks for your time.

[gauravtiwari]

@Ifegwu Made a PR for you here - https://github.com/Ifegwu/soft_work/pull/1

Please take a look. Basically, you were using an old version of webpacker.

[Ifegwu]

After the merge, everything works fine, but I cannot see react components renders on the page. but on the chrome console I can see <script src="http://localhost:8080/counter.js"></script>. What can I do to get <%= javascript_pack_tag 'counter%> find my react applications inside app/javascript/counter folder? Thanks alot for you time. I really appreciate your effort.

[ytbryan]

you need to run both rails server and ./bin/webpack-dev-server. webpack-dev-server serves your counter.js.

Gaurav already added that to your procfile. So, you only need to run foreman start -f Procfile.dev

Did you run that foreman command?

[Ifegwu]

@ytbryan @gauravtiwari Yes I did. I can only see <script src="http://localhost:8080/counter.js"></script> on my console, but cannot get it rendered on the web browser. kindly take a look at my repo: https://github.com/Ifegwu/soft_work.git and see where I am not getting it right. Thank you.

[Ifegwu]

Sorry for the delay in communication, I have solve this problem long time ago. Thanks for your contributions.

[Ifegwu]

@gauravtiwari Kindly assist me to make this repo: https://github.com/Ifegwu/soft_work.git to be hot reload. Many thanks for your efforts.