typescript Vercel cli构建失败,出现错误“类型错误:找不到模块'Formik'或其相应的类型声明,”

nhhxz33t  于 2023-01-18  发布在  TypeScript
关注(0)|答案(2)|浏览(116)

对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
mcvgt66p

mcvgt66p1#

问题是从Formik语句导入

import { Field } from "Formik";

需要

import { Field } from "formik";

在我的机器(Windows)上,它构建得很好。由于操作系统或设置不同,Vercel在构建步骤中失败,并希望“Formik”中的“f”是小写的。

4ioopgfo

4ioopgfo2#

类似的事情发生在OP我的项目是失败的,因为我重命名的文件夹,我的代码在本地工作正常,但在vercel失败。我发现this message从vercel:
这个问题的一个可能原因是一些文件系统是不区分大小写的,但是Vercel部署使用的是区分大小写的文件系统。因此,当您在本地机器上更改文件名的大小写时,Git可能只会在您各自的静态导入语句中获取更改。这意味着您的仓库现在语法不正确,从而导致在Vercel平台上部署存储库时出现构建错误。
建议的解决方案(对我有效)是使用以下命令确保文件名和导入中的大小写在存储库和本地机器之间是相同的:

git config core.ignorecase false

相关问题