在 create-react-app 專案內使用 dynamic import / import() 遇到 module not found 的錯誤

react-hooks react-router-dom webpack import() reactjs

dc88 2023-11-06 22:07:58 ‧ 650 瀏覽

分享至

請教各位
我用 react-create-app 建立專案
想從 url 片段中取一部分值然後顯示對應資料夾內的圖片

像這樣

// 假設首頁是這個網址
pseudo.com
// 在這個網址時就顯示名為 projectName 資料夾內的圖片
pseudo.com/categoryName/projectName

我用 react-router-dom 處理路由
用 useLocation 這個 Hook 來取得 routing 間傳遞的 data
但會顯示 module not found error

import() 的部分（會出現 module not found 錯誤）

function ImageGallery({ galleryDirectory }) {
  const [images, setImages] = useState([]);
  useEffect(() => {
    const loadImages = async () => {
      try {
        const imageContext = await import(
          `./img/portfolio/${galleryDirectory}`
        );
        const imagePaths = imageContext.keys();
        const imageComponents = await Promise.all(
          imagePaths.map(async (path) => {
            const module = await import(
              `./img/portfolio/${galleryDirectory}/${path.slice(2)}`
            );
            const imageSrc = module.default;
            return <img keys={path} src={imageSrc} alt={path} />;
          })
        );
        setImages(imageComponents);
      } catch (error) {
        console.error("error loading images:", error);
      }
    };
    loadImages();
  }, [galleryDirectory]);
  return <>{images}</>;
}

export default ImageGallery;

如果用 require.context() 而不是import()的話其中 directory 似乎不能是變數?

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

資料夾結構

public/
src/
  api/
    projectData.js
  img/
    portfolio/
      graphic1/
        graphic_1.jpg
        graphic_2.jpg
        ...
      web1/
        web_1.png
        web_2.jpg
        ...
  App.js
  ImageGallery.js // 進行 import() 的檔案
  SingleProject.js
  index.js

提供 package.json 版本資訊

"dependencies":{
    ...
    "react": "^18.2.0",
    "react-router-dom": "^6.14.2",
    ...
}
"devDependencies": {
    ...
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
}

另外附上線上demo的codesandbox

謝謝！

dc88 iT邦新手 4 級 ‧ 2023-11-15 23:41:26 檢舉

很可惜沒有解答
我來補充我後來嘗試的幾個方法跟結論有錯的話再請其他大大指正
1. require.context() first parameter 必須要是 static string
不管是 template string ( `./img/${xxx}`) 或是 concatenate string ( './img/'+xxx )都不行
2. module not found 的錯誤出現在找不到指定 module 的時候，但也懷疑其實dynamic import() 不能只pass directory as parameter？
我看其他人使用都是用在import .js，像這樣 import(`./blabla/${directoryName}/index.js`)

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

alien663

iT邦研究生 4 級 ‧ 2023-11-07 09:04:21

Rest URL

如果你是要用Rest URL的方式傳遞參數，可以參考以下寫法

MyRouter.jsx

export const router = createBrowserRouter([
    {
        path: "/",
        element: <App></App>,
        children: [{ path: 'test/:TID', element: <TestComp /> },]
    }
])

TestComp

import React, { useState } from 'react'
import { useParams } from 'react-router-dom'
const TestComp = (props) => {
    let { TID } = useParams()
    return(
        <div>Hello World{TID}</div>
    )
}
export default TestComp

Picture

如果是public的圖片，那我會這樣秀出來。
logo.png就放在public那個資料夾底下

<img src={process.env.PUBLIC_URL + '/logo.png'}

如果是要控制顯示的圖片，我在別的網站有看到Sample Code
Adding Images, Fonts, and Files

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;