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

原创已于 2023-04-13 17:47:37 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #vue.js

于 2023-04-13 14:05:20 首次发布

文章讲述了在Vue3项目中使用require.context引发的错误，尝试通过安装@types/webpack-env和修改tsconfig.json配置来解决，但问题未完全消除。最终发现需在tsconfig.vitest.json中添加webpack-env到types才消除编译错误，然而浏览器仍报requireisnotdefined，因为require是webpack的方法，不适用于Vite构建的项目。建议使用Vite的导入机制替代require.context。

最近使用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"]
  }
}