＃自己解決済 [Vue3] 親→子コンポーネントに「defineProps」で、変数を渡そうとしても「error 'defineProps' is not defined no-undef」が出力

Question

実現したいこと

ご覧いただき、誠にありがとうございます。
vue@3.5.17 で、親コンポーネントから子コンポーネントに変数を【一つ】渡したいだけの、きわめて単純なソースです。

下記のソースで詳細を示します。
子コンポーネントで定義した変数「text」にて、親コンポーネントで指定した「本日は晴天なり」を表示させるのが目的です。

【わからないこと】

子コンポーネントの<script setup>におけるdefinePropsの書き方が悪いのか、もしくはESLintの設定が不正なのかが見当がつかない状態です。

---

エラーメッセージ

/app/hoge/src/components/Test01.vue
  XXX:1  error  'defineProps' is not defined  no-undef

//上記エラー以外は何も表示されていませんでした。

//●　yarnのログで出力されたエラー。
 INFO  Starting development server...

 ERROR  Failed to compile with 1 error                                                                                           1:21:58 PM

[eslint]
/app/hoge/src/components/Test01.vue
  6:1  error  'defineProps' is not defined  no-undef

//【修正後】

module.exports = {
  root: true,
  extends: ['plugin:vue-libs/recommended'],
  rules: {
    indent: 'off',
    'space-before-function-paren': 'off'
  },
  globals: {
    "defineProps": "readonly",
    "defineEmits": "readonly",
    "defineExpose": "readonly",
    "withDefaults": "readonly"
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

【参考にしたサイト】
（１）ESLintに'defineProps' is not defined.(no-undef)と言われる
https://commis.hatenablog.com/entry/2021/10/21/113831

（２）'defineProps' is not defined #15015
https://github.com/eslint/eslint/discussions/15015

補足

【Vueのバージョンと、関連ライブラリのバージョン】

+-- @babel/core@7.27.7
+-- @babel/eslint-parser@7.27.5
+-- @vue/cli-plugin-babel@5.0.8
+-- @vue/cli-plugin-eslint@5.0.8
+-- @vue/cli-service@5.0.8
+-- core-js@3.43.0
+-- eslint-plugin-vue@8.7.1
+-- eslint@7.32.0
`-- vue@3.5.17

Vueの環境は、Windows11のWSL2-Ubuntu内、Dockerで構築しました。

（参考）Dockerfileの内容

FROM node:lts-alpine

# vue-cliをインストール
RUN apk update && \
    apk add --no-cache npm && \
    npm install --location=global @vue/cli

WORKDIR /app

（参考）docker-compose.ymlの内容

version: '3'

services:
  vue-app:
    build:
      context: "./"
      dockerfile: "Dockerfile"
    ports:
      - 8080:8080
    volumes:
      - ./app:/app
    tty: true
    environment:
      - NODE_ENV=development

Answer 1

自己解決しました。

子コンポーネント側で、<script setup>タグ内で、import { defineProps } from "vue"を追記して回避できました。

<script setup>
import { defineProps } from "vue"    // ←　1行追記
defineProps({
    text: String
})

</script>

また下記の資料を参考にし、eslintの設定やプラグインのバージョンの点検も必要だったので、共有いたします。

Vue3 の SFC (<script setup>) を TypeScript で使用する時に VSCode の lint エラーを解決する手順
https://qiita.com/soumi/items/d3f45bef08c154a95b5f