react裡的require失效怎麼辦

react裡的require失效是因為require回傳一個ES模組而不是字串，其解決方法就是透過「require('../path/to/image.jpg').default;」方式引入即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react裡的require失敗怎麼辦？

react專案中require引入圖片無效的原因及解決方案

#原因

如果使用create-react-app和require導入映像，require傳回一個ES模組而不是字串。這是因為在file-loader中，esModule選項是預設啟用的。

解決方案

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

require與import區別

require是commonjs的規範，在node中實作的api； import是es的語法，由編譯器處理。所以import可以做模組依賴的靜態分析，配合webpack、rollup等可以做treeshaking。

commonjs導出的值會複製一份，require引入的是複製之後的值（引用類型只複製引用），es module導出的值是同一份（不包括export default），不管是基礎類型還是應用類型。

寫法上有差別，import可以使用import * 引入全部的export，也可以使用import aaa, {bbb}的方式分別引入default和非default的export，相比require更靈活。

推薦學習：《react影片教學》

以上是react裡的require失效怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！