Module not found: Error: Can't resolve 'vue/dist/vue.esm'

Viewed 22

I added Vue to a Rails 6 app and I'm getting the following error:

ERROR in ./app/javascript/packs/hello_vue.js
Module not found: Error: Can't resolve 'vue/dist/vue.esm'

It's looking for it within app/javascript/packs but I'm not sure why.

The file vue.esm also does not exist within vue/dist directory.

My hello_vue.js file is:

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#hello',
    data: () => {
      return {
        message: "Can you say hello?"
      }
    },
    components: { App }
  })
})

I also added the following to application.html.erb:

<head>
  ...
  <%= javascript_pack_tag 'hello_vue' %>
  <%= stylesheet_pack_tag 'hello_vue' %>
  ...
</head>
<body>
  ...
  <div id='hello'>
    {{message}}
    <app></app>
  </div>
  ...
</body>
0 Answers
Related