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

Question

実現したいこと

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

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

/*  親コンポーネント　/app/hoge/src/App.vue　 */

<template>
  <Test01 text="本日は晴天なり" />
</template>

<script>
import Test01 from './components/Test01.vue'
</script>
//----------

/*  子コンポーネント　/app/hoge/src/components/Test01.vue　 */
<template>
    <p>{{text}}</p>
</template>

<script setup>
defineProps({
    text: String
})
</script>

発生している問題・分からないこと

今回の問題は、ローカル環境のページを開く、もしくはファイルをセーブした瞬間に、

error 'defineProps' is not defined no-undef

というエラーが発生します。

後述の「試したこと・調べたこと」で見た内容で実際のコードを書き換えました。

node_modules/@vue\vue-loader-v15/.eslintrc.jsファイルで、ESLintに引っかからないように、コードを追加したのですが、同じエラーが発生します。

---

【わからないこと】

子コンポーネントの<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

該当のソースコード

//【ソース１】

/*  親コンポーネント　/app/hoge/src/App.vue　 */

<template>
  <Test01 text="本日は晴天なり" />
</template>

<script>
import Test01 from './components/Test01.vue'

//----------

/*  子コンポーネント　/app/hoge/src/components/Test01.vue　 */
<template>
    <p>{{text}}</p>
</template>

<script setup>
defineProps({
    text: String
})
</script>

//【ソース２】
/*  node_modules/@vue\vue-loader-v15/.eslintrc.js　 */

//【修正前】
module.exports = {
  root: true,
  extends: ['plugin:vue-libs/recommended'],
  rules: {
    indent: 'off',
    'space-before-function-paren': 'off'
  }
}

//【修正後】
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