英文:
After upgrading React app to vite, node-fetch cause error
问题
It seems like you're encountering an error related to the import statements for "RequestInit" and "Body" in the file "node_modules/node-fetch/lib/index.mjs". This error is likely caused by a dependency, specifically "@ThePackage/CausingIssue" version "^2.3.28".
你遇到的问题似乎与在文件 "node_modules/node-fetch/lib/index.mjs" 中导入 "RequestInit" 和 "Body" 相关的错误有关。这个错误很可能是由一个依赖项引起的，具体来说是 "@ThePackage/CausingIssue" 版本 "^2.3.28"。
If you're suspecting a TypeScript or type-related issue, you might want to check if there are any conflicting type definitions or if there's a mismatch between the types used in your code and the types expected by the dependency.
如果你怀疑是 TypeScript 或类型相关的问题，你可能需要检查是否存在冲突的类型定义，或者你的代码中使用的类型与依赖项期望的类型是否不匹配。
Keep in mind that resolving this issue might involve adjusting the versions of your dependencies or finding a workaround specific to this situation.
请记住，解决这个问题可能涉及到调整你的依赖项的版本或找到针对这种情况的特定解决方案。
英文:
bit stumped of this one. Switching the build tool over to vite has been super smooth bar this error
No matching export in "node_modules/node-fetch/lib/index.mjs" for import "RequestInit"
No matching export in "node_modules/node-fetch/lib/index.mjs" for import "Body"
a dependancy is causing this issue, but unfortunately is a privately maintained package that I can really do much with.
Package.json
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@ant-design/icons": "^5.1.4",
"@ThePackage/CausingIssue": "^2.3.28", <------------------------------------ error
"antd": "^4.19.5",
"eslint": "^8.3.0",
"msw": "^1.2.2",
"prompts": "^2.4.2",
"react": "^17.0.2",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^17.0.2",
"react-query": "^3.38.0",
"react-refresh": "^0.11.0",
"react-router-dom": "^6.0.2",
"socket.io-mock": "^1.3.2",
"web-vitals": "^2.1.4",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@types/jest": "^29.2.5",
"@types/node": "^14.18.52",
"@types/react": "^17.0.44",
"@types/react-dom": "^17.0.15",
"@types/styled-components": "^5.1.26",
"@types/testing-library__jest-dom": "^5.14.5",
"@typescript-eslint/eslint-plugin": "^5.59.0",
"@typescript-eslint/parser": "^5.59.0",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"less": "^4.1.3",
"typescript": "^4.9.4",
"vite": "^4.3.9"
}
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
css: {
preprocessorOptions: {
less: {
math: "always",
relativeUrls: true,
javascriptEnabled: true,
},
},
}
})
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
// "noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"declaration": true,
/* Custom*/
"sourceMap": true,
"allowJs": true,
"removeComments": false,
"forceConsistentCasingInFileNames": true,
"noImplicitAny": false,
"noImplicitThis": false,
"noUnusedLocals": false,
"noPropertyAccessFromIndexSignature": false,
"esModuleInterop": true,
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
What have I done so far?
- lots of google, searching stackoverflow
- mixing and matching @types versions
- chatGPT
- dove into the packaage confim node-fetch is there and the erroring exports are infect there
- suspect a typescript / type issue
答案1
得分: 1
已解决，以防对其他人有帮助
在下面添加以下内容，它告诉构建工具在存在多个依赖项时要使用哪个。在这种情况下，主应用程序是 ESM，因此默认情况下它会尝试加载 node-fetch 的 ESM 版本。将其解析为 CJS 版本会修复该错误。值得注意的是，现在 node 具有本地的 fetch 实现，所以如果我有访问失败的包，可能最好重构。
其次（不是问题，但值得一提），在 node 中 Stream 和 Buffer 没有原型，因此解析为 stream-browserify 创建了一个填充，解决了 .prototype 未定义的错误。
这些代码放在 vite.config.js/ts 中：
resolve: {
alias: {
"node-fetch": "node-fetch/lib/index.js",
"stream": "stream-browserify"
},
},
英文:
Figured it out, posting incase it helps anyone else
adding the following below works, it tells the build tool which dependency to use when there are multiple. In this case
the main application is ESM so by defult it tried to load the ESM version of node-fetch. reolsving to the CJS version fixed that error. Worth noting that node has a native fetch implementation now, so if I'd had access to the failing package probably would have been best to refactor.
Secondly (not in the question but worth a mention), Stream, Buffer didn't have prototypes in node so resolving to stream-browserify created a fill that resolved a .prototype undefined error.
this goes in the vite.config.js/ts
resolve: {
alias: {
"node-fetch" : "node-fetch/lib/index.js",
"stream" : "stream-browserify"
},
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论