👌

<script> and <script setup> must have the same language type.が発生した

2024/06/13に公開

TypeScript

tech

概要

<script setup>としたscriptタグ内の処理でtsを使用したかったので<script setup lang="ts">と変更したら、Pre-transform error: [@vue/compiler-sfc] <script> and <script setup> must have the same language type.というエラーが発生した。
これの原因と解決策を残す。

環境

Vue:3.4.27
Nuxt:3.12.1
typescript: 5.4.3

原因

原因となったhoge.vue内に、<script>が2つ存在し、そのうち片方だけにlang="ts"を付与したために発生した。

<script setup lang="ts">
import { ref } from 'vue'

const hogeFlg = ref(false)
</script>

<script>
export default {
  data() {
    return {
      fugaFlg: false,
    }
  },
}
</script>

解決策

両方の<script>タグにlang="ts"を付与することで解消した。

<script setup lang="ts">
import { ref } from 'vue'

const hogeFlg = ref(false)
</script>

<script lang="ts">
export default {
  data() {
    return {
      fugaFlg: false,
    }
  },
}
</script>

背景

このプロジェクトでは当初はvue2系を使用しており、その後Vue3系に乗り換えたが、全てをComposition API化できず、ファイルによってはOptions APIスタイルの記述も残っている状態です。
そのため1つのファイル内で<script>タグが2箇所存在していることもあり、今回はそれが理由で発生したエラーでした。

備考

などで同様のエラー報告がありますが、同じ原因と思われるものがなく、あまり参考となる情報がなかったので記事としました。
ただ背景の項目で記したように特殊な事例であったために、他の方が同様の問題に遭遇することは稀かもしれません。

概要

環境

原因

解決策

背景

備考

Discussion