对TypeScript还是个新手,只用了一天半的时间就可以让Vercel工作了。我尝试通过Vercel cli部署。我登录了,通过查看Vercel Jmeter 板中的失败构建日志进行了验证。当我运行"npx vercel"(我在Windows上)时,我得到的错误是:
构建错误:"类型错误:找不到模块'Formik'或其相应的类型声明。"
我试过了
1.在tsconfig.json中将www.example.com从"ESNext"更改为"ES2015"和"ES5"。Vercel在构建时将其更改为"ESNext"。 compilerOptions.target from "ESNext" to "ES2015" and "ES5". Vercel changes it on build to "ESNext".
1."vercel--dev"在本地成功构建。
1."vercel--prod"在同一点失败。
1.将"Formik"称为"Formik"。
1.移除tsconfig.json中node_modules的排除。Vercel会更改它,以便无论如何都会排除node_modules。
1.覆盖Vercel构建设置,使构建命令使用"Yarn构建"。还尝试了"下一个构建"。
1.覆盖Vercel构建设置,以便安装命令使用"yarn install"。
1.在Vercel的设置中将node.js版本从14.x更改为12.x
1.挖掘通过几个谷歌搜索,Vercel的文档,问题Vercel的Github,并在这里的SO。
1."npxYarn构建"在当地获得成功。
我有一种预感,这可能是一个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
2条答案
按热度按时间mcvgt66p1#
问题是从Formik语句导入
需要
在我的机器(Windows)上,它构建得很好。由于操作系统或设置不同,Vercel在构建步骤中失败,并希望“Formik”中的“f”是小写的。
4ioopgfo2#
类似的事情发生在OP我的项目是失败的,因为我重命名的文件夹,我的代码在本地工作正常,但在vercel失败。我发现this message从vercel:
这个问题的一个可能原因是一些文件系统是不区分大小写的,但是Vercel部署使用的是区分大小写的文件系统。因此,当您在本地机器上更改文件名的大小写时,Git可能只会在您各自的静态导入语句中获取更改。这意味着您的仓库现在语法不正确,从而导致在Vercel平台上部署存储库时出现构建错误。
建议的解决方案(对我有效)是使用以下命令确保文件名和导入中的大小写在存储库和本地机器之间是相同的: