对 TypeScript 还是有点陌生，只有一天半的时间试图让 Vercel 工作。我正在尝试通过 Vercel cli 进行部署。我已登录，通过查看 Vercel 仪表板中失败的构建日志进行验证。当我运行“npx vercel”（我在 Windows 上）时，我得到的错误是：
<块引用>构建错误：“类型错误：找不到模块‘Formik’或其 相应的类型声明。”
我试过了：
我有一种预感，这可能是 Windows 与 Linux 的问题（大写与小写文件名），但无法确认。我在 Windows 10 上，而 Vercel（根据他们的构建日志）是 Linux。但是 Formik 是我通过命令行安装的一个包，我觉得奇怪，需要手动更改。
另一件令我感到奇怪的事情是 Vercel 输出的源文件中没有 node_modules 文件夹。我希望在它运行 yarn install 后会有一些东西。
./src/components/InputField.tsx 的第二行抛出的错误：
import React, { InputHTMLAttributes } from "react";
import { Field } from "Formik";
...
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"src/utils/createWithApollo.js" ]
,
"exclude": [
"node_modules"
]
}
package.json
{
"name": "with-chakra-ui",
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"gen": "graphql-codegen --config codegen.yml"
},
"dependencies": {
"@apollo/client": "3.1.3",
"@chakra-ui/icons": "^1.0.0",
"@chakra-ui/react": "^1.3.2",
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.1.5",
"formik": "^2.2.6",
"framer-motion": "^3.3.0",
"graphql": "^15.5.0",
"isomorphic-unfetch": "^3.1.0",
"next": "latest",
"next-apollo": "^5.0.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"react-is": "^17.0.2"
},
"license": "MIT",
"devDependencies": {
"@graphql-codegen/cli": "1.20.1",
"@graphql-codegen/typescript": "^1.20.2",
"@graphql-codegen/typescript-operations": "1.17.14",
"@graphql-codegen/typescript-react-apollo": "^2.2.1",
"@types/node": "^14.14.25",
"typescript": "^4.1.3"
}
}
来自失败构建的示例日志：
20:42:15.582 Retrieving list of deployment files...
20:42:20.745 Downloading 61 deployment files...
20:42:21.224 Analyzing source code...
20:42:22.920 Installing build runtime...
20:42:27.164 Build runtime installed: 4.245s
20:42:31.022 Looking up build cache...
20:42:32.091 Build cache not found
20:42:33.365 Installing dependencies...
20:42:33.706 yarn install v1.22.10
20:42:33.770 [1/4] Resolving packages...
20:42:34.081 [2/4] Fetching packages...
20:42:49.164 info fsevents@2.3.2: The platform "linux" is incompatible with this module.
20:42:49.164 info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
20:42:49.176 [3/4] Linking dependencies...
20:42:49.178 warning " > @apollo/client@3.1.3" has unmet peer dependency "subscriptions-transport-ws@^0.9.0".
20:42:49.179 warning " > @chakra-ui/icons@1.0.5" has unmet peer dependency "@chakra-ui/system@>=1.0.0".
20:42:49.179 warning "@chakra-ui/icons > @chakra-ui/icon@1.1.1" has unmet peer dependency "@chakra-ui/system@>=1.0.0".
20:42:49.183 warning "@chakra-ui/react > @chakra-ui/modal > react-remove-scroll@2.4.0" has incorrect peer dependency "react@^16.8.0".
20:42:49.183 warning "@chakra-ui/react > @chakra-ui/modal > @chakra-ui/focus-lock > react-focus-lock@2.4.1" has incorrect peer dependency "react@^16.8.0".
20:42:49.185 warning "@emotion/styled > @emotion/babel-plugin@11.1.2" has unmet peer dependency "@babel/core@^7.0.0".
20:42:49.185 warning "@emotion/styled > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
20:42:49.193 warning " > @graphql-codegen/typescript-react-apollo@2.2.1" has unmet peer dependency "graphql-tag@^2.0.0".
20:42:58.177 [4/4] Building fresh packages...
20:43:00.569 Done in 26.87s.
20:43:00.598 Detected Next.js version: 10.0.6
20:43:00.781 Running "yarn build"
20:43:01.046 yarn run v1.22.10
20:43:01.069 $ next build
20:43:01.617 info - Creating an optimized production build...
20:43:01.633 Attention: Next.js now collects completely anonymous telemetry regarding usage.
20:43:01.633 This information is used to shape Next.js' roadmap and prioritize features.
20:43:01.633 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
20:43:01.633 https://nextjs.org/telemetry
20:43:01.874 We detected TypeScript in your project and reconfigured your tsconfig.json file for you.
20:43:01.874 The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:
20:43:01.874 - exclude was set to ['node_modules']
20:43:07.311 Failed to compile.
20:43:07.311 ./src/components/InputField.tsx:2:23
20:43:07.311 Type error: Cannot find module 'Formik' or its corresponding type declarations.
20:43:07.311 1 | import React, { InputHTMLAttributes } from "react";
20:43:07.311 > 2 | import { Field } from "Formik";
20:43:07.311 | ^
20:43:07.311 4 | import {
20:43:07.311 5 | FormControl,
20:43:07.336 error Command failed with exit code 1.
20:43:07.336 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
20:43:07.360 Error: Command "yarn build" exited with 1
答案 0 :(得分：1)
问题是从 Formik 语句导入
import { Field } from "Formik";
必须
import { Field } from "formik";
在我的机器 (Windows) 上，它构建得很好。由于操作系统或设置不同，Vercel 在构建步骤中失败，并期望“formik”中的“f”为小写。