Estoy usando Rails 5.2.0 y Webpacker gem para implementar una aplicación Vue.

El archivo show.html.erb es muy simple:

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

Y luego en mi paquete de entrada, 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 }
  })
})

En desarrollo, todo funciona absolutamente bien. La aplicación está montada y es funcional.

Pero en producción, después de cargar la página y ejecutar JS,<div data-behavior="vue-app"> se elimina de la paginación, dejando solo<!-- --> en su lugar

En la consola, no hay absolutamente ningún error. Puedo confirmar usando DevTools que el archivo pack js está cargado y se analizó, ya que el archivo console.log está impreso en la consola.

Heck, la prueba de que Vue está funcionando es que toda la<div> donde se montó se eliminó de DOM después del análisis JS.

Lo más extraño de todo es que pude lograr que la aplicación se monte UNA VEZ, conectando un depurador en la línea console.log y apagándolo mientras el depurador pausó la ejecución. Incluso cuando vi que la aplicación se montó esa vez, no pude lograr que se montara más tarde, incluso jugando con el depurador de nuevo ... es muy, muy extraño.

Estas son las versiones de package.json:

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

La aplicación Rails es completamente nueva, sin otra configuración que la predeterminada.

Webpacker gem es 3.5.3 y Rails es 5.2.0.

Después de pasar mucho tiempo en esto, solo encontré este problema de github:https: //github.com/rails/webpacker/issues/152

EDITA: Estoy proporcionando un enlace a la aplicación de producción real donde ocurre este error:https: //planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8

Verás que no se está montando. Aquí está la misma página en desarrollo: