Webpacker: HMR not working (fresh install)

[haffla]

I setup a new Rails project with --webpack=vue, enable hmr, render the provided example hello_vue component. Initial render works fine but HMR updates are failing with

TypeError: Cannot read property 'extend' of undefined....

The error is in node_modules/vue-hot-reload-api/dist/index.js. I don't think this library is responsible for it.

var newCtor = record.Ctor.super.extend(options) // line 141

Any idea what could be the reason for this?

Here is the Rails app. First commit is just rails new.... Second commit is setting everything up.

[kozhin]

Hi @haffla !

I don't see any HMR issues with your app. With new Webpacker 3.0.2 it works just fine.

What I did:

1. Clonned your repo
2. Run: bundle install
3. Run: yarn install
4. Run: ./bin/webpack-dev-server --listen-host 0.0.0.0

Also I used Docker to run your app, so I've made some changes in webpacker.yml in the development section.

development:
  <<: *default
  compile: true

  dev_server:
    https: false
    host: 0.0.0.0
    port: 3035
    public: 0.0.0.0:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    disable_host_check: true
    use_local_ip: false

[gauravtiwari]

@kozhin We have now dropped support for CLI args in favour of env variables from 3.0.2 so, --listen-host 0.0.0.0 won't work. More documentation here: https://github.com/rails/webpacker#development

[gauravtiwari]

@haffla Probably, remove node_modules and re-run yarn to do a fresh install.

[haffla]

@kozhin If I change the <style> of app.vue HMR is actually working.... so strange. Can you confirm that it is working for you if you change the Javascript and template?

@gauravtiwari Nope, unfortunately that doesn't help.

I just tested it on another system. Same problem on a Windows machine.
By the way I'm on Ruby 2.4.2 and Node 8.6.0.

[kozhin]

@haffla I can confirm that HMR works fine with your app if app.vue or hello_vue.js are modified.

If you make changes in application.js (in packs folder), nothing will happen until you will add the following to your application.html.erb:

<%= javascript_pack_tag 'application' %>

Also you will have to reload page.

Unused packs are not tracked by Webpacker as I see. So you have to add them to your page layout first. Hope this helps.

[haffla]

As I've explained: HMR is kind of working. The server is listening for changes. But there is an error.

Would it be possible that you commit the changes that you did to my repository @kozhin? Would be very nice. I can't think of any other way to find out what's wrong.

[kozhin]

@haffla I've sent a pull request to your repo.

[haffla]

@kozhin found the problem. I was too blind. Thanks man!
Fixed in #920