Property 'context' does not exist on type 'NodeRequire'.ts(2339)

最近使用vue3官方腳手架建立的專案，在執行下面的程式碼後報錯：

const files = require.context('./modules', false, /\.js$/)

查閱相關資料，有人提出解決方法如下，安裝@types/webpack-env依賴：

npm i -D @types/webpack-env

修改tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "types": [
      "webpack",
      "webpack-env" // 加入這個
    ]
  },
}

但是發現，開始的報錯並沒有消失。

在專案根目錄找到tsconfig.vitest.json，在"types": ["node", "jsdom"]中加入"webpack-env"

{
  "extends": "./tsconfig.app.json",
  "exclude": [],
  "compilerOptions": {
    "composite": true,
    "lib": [],
    "types": ["node", "jsdom","webpack-env"]
  }
}

報錯消失。

雖然編輯器不報錯了，但是瀏覽器卻無法識別這個方法：
Ucaught ReferenceError: require is not defined

結論：這個方法是webpack提供的，既然都用Vite了就別用這個方法了。

它的作用無非就是引入了一個目錄下的所有檔案，大不了手動引入。