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系の変更点で詰まったお話でした。