All threads / Vue + Webpacker: app works in development but doesn't mount template in production - blank screen with no errors in console!

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Vue + Webpacker: app works in development but doesn't mount template in production - blank screen with no errors in console!

TL asked in Javascript
I'm using Rails 5.2.0 and Webpacker gem to deploy a Vue application.

The show.html.erb file is very simple:

<div data-behavior="vue-app"><MyComponent></MyComponent></div>

And then in my entry pack, packs/my_vue_app.js:

    import TurbolinksAdapter from 'vue-turbolinks';
    import Vue from 'vue/dist/vue.esm'
    Vue.use(TurbolinksAdapter);
    import MyComponent from '../components/my_app/index.vue'
    
    document.addEventListener('turbolinks:load', () => {
      
      var element = $('[data-behavior="vue-app"]');
    
      if(!element) { return };
    
      console.log('Initializing Vue');
    
      const app = new Vue({
        el: element[0],
        data: {
          
        },
        components: { MyComponent }
      })
    })

In development, everything works absolutely fine. The app is mounted and functional.

But in production, after the page load and JS runs, `<div data-behavior="vue-app">` is removed from the paging, leaving only `<!-- -->` in it's place.

In the console, there are absolutely no errors. I can confirm using DevTools that the pack js file is loaded, and it was parsed, since the console.log is printed in the console.

Heck, the proof that Vue is working is that the entire `<div>` where it was mounted was removed from DOM after JS parsing. 

The weirdest thing of all is that I could get the app to mount ONCE, by attaching a debugger on the console.log line and turning it off while the debugger paused execution. Even tough I saw the app mounting that time, I could not get it to mount later on, even fiddling with the debugger again ... it's really, really weird. 

These are the versions of package.json:

```
"vue": "^2.5.16",
"vue-loader": "14.2.2",
"vue-template-compiler": "^2.5.16",
```

The Rails app is brand new, with no config other than the default.

Webpacker gem is 3.5.3 and Rails is 5.2.0. 

After spending a really long time on this, I only found this github issue: https://github.com/rails/webpacker/issues/1520

I'm providing a link to the real, production app where this bug is happening: https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q

You'll see it's not mounting. Here's the same page in development:

[![screenshot of app mounted][1]][1]


  [1]: https://i.stack.imgur.com/ZZbk0.png
Did you get this working? 
https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q

It appears to me to be working for you.
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,399+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.