❓
laravel viteで開発しているとthe requested module ~ does not provide an ~ のエラー
はじめに
こんにちは
今回、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