0
Help us understand the problem. What are the problem?

posted at

updated at

RailsにVue3を入れて、webpack-dev-serverで失敗 "export 'default' (imported as 'Vue') was not found in 'vue'

環境

Rails 6.1.4
Vue.js 3.2.31

背景

bin/webpack-dev-serverを実行して以下のエラーが出た。

ERROR in ./app/javascript/packs/hello_vue.js 11:16-19
"export 'default' (imported as 'Vue') was not found in 'vue'

対処法

Vueなんて無いよと言われたので、hello_vue.jsを見に行きました。

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

何も異変に気づかず、、
公式ドキュメントを読んだ結果、Vue3系を使っているのにVue2系の書き方をしていることがわかりました。
Vue 2.x からの破壊的変更

Vueオブジェクトではなく import { createApp } from 'vue'と名前付きインポートをしなければなりませんでした。

import { createApp } from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = createApp(App)
  app.mount('#app')
})

再度bin/webpack-dev-serverをしてみると

ℹ 「wdm」: Compiled successfully.

正常にコンパイルできました。

3系の変更点で詰まったお話でした。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?