laravel viteで開発しているとthe requested module ~ does not provide an ~ のエラー

2024/08/07に公開

はじめに

こんにちは
今回、Laravel + vite + 一部Reactで作成しているプロジェクトにおいて、理解不能なバグに出会ってしまっため、備忘録としてここに残しておきます。

対象読者

chromeの開発者コンソールで 下記エラーで画面が表示されなくなってしまっている方。

Uncaught SyntaxError: The requested module '/node_modules/prop-types/index.js?v=0151ba07' does not provide an export named 'array' (at react.tagify.jsx:4:18)

結論

一度、下記コードでimportする

import {string, array, func, bool, object, oneOfType} from "prop-types"
import {renderToStaticMarkup} from "react-dom/server"

その後消してもOK

本文

今回流れとしては、いつも通り開発をしようとnpm run devを行うと、一部reactを使っているページでそのreact部分だけ表示されないことに気がつき、コンソールを確認すると下記エラーが出ていました。

laravel vite The requested module /node_modules/prop-types/index.js does not provide an export named

私の場合発生源は @yaireo/tagify の react.tagify.jsx の下記部分でした。

import {string, array, func, bool, object, oneOfType} from "prop-types"

なぜそこでエラーになるのかわからず、 node_modules を削除して npm install をしなおしてみたりもしたんですが、解決せず。
一度本当に読み込めないのか、全く別のファイル、私の場合 app.js の中で同じコードを追加し、さらにconsole.logをすることに

import {string, array, func, bool, object, oneOfType} from "prop-types"

console.log(string, array)

すると、別のエラーが出現
似たようなエラーだったので、これも同じくimportすることにしてみました。

import {renderToStaticMarkup} from "react-dom/server"
import {string, array, func, bool, object, oneOfType} from "prop-types"

console.log(string, array)

すると、なぜか解決。
vite側で感知していなかった的な感じなのでしょうか?
有識者の方がいらっしゃいましたら是非ご教示いただきたいです。

ちなみに、npm run build を行った際には同じ問題は起こりませんでした。

Discussion