Búsqueda de sitios web

typescript - La compilación de Nextjs falla en el linting y la verificación de validez de tipos cuando un paquete de node_module tiene importación de tipos

Proyecto NextJS 13 con un paquete que tiene una dependencia interna de núcleo (react-leaflet->@react-leaflet/core).

yarn run build La compilación falla en "Linting y verificación de la validez de los tipos"

Parece un problema de compatibilidad de TypeScript relacionado con import {type MyType}

Enlace al archivo específico sobre dependencia

package.json:

{
  "dependencies": {
    "next": "^13.0.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.0",
    "leaflet": "^1.9.3"
  },
  "devDependencies": {
    "@types/leaflet": "^1.9.0",
    "@types/node": "18.11.17",
    "@types/react": "17.0.20",
    "eslint": "7.32.0",
    "eslint-config-next": "^13.0.7",
    "typescript": "4.4.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Esperando que yarn run build se compile correctamente

Problema resuelto:

Resuelto usando yarn upgrade --latest para actualizar la versión de typescript.

Respuesta #1

Resuelto usando yarn upgrade --latest para actualizar la versión de typescript.

El problema fue causado después de migrar de NextJS 11

package.json resuelto:

{
  "dependencies": {
    "leaflet": "^1.9.3",
    "next": "^13.0.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.0"
  },
  "devDependencies": {
    "@types/leaflet": "^1.9.0",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "eslint": "8.30.0",
    "eslint-config-next": "^13.0.7",
    "typescript": "4.9.4"
  }
}

Respuesta #2

El linter no espera ver dos palabras sin una coma.

Además de eso, no es necesario escribir 'type', se pueden importar tipos sin declarar 'type' delante. NextJS optimizará tu aplicación eliminando código innecesario y solo compilará el código que necesita estar allí. No tienes que preocuparte por eso.

La dependencia probablemente se hace sin considerar frameworks como Next.

Intenta modificar el archivo en node_modules y eliminar las declaraciones de tipo:

import React, {MutableRefNode, ReactNode} from react;

Sugiero abrir un problema/discusión en el GitHub del paquete. Es decir, a menos que puedas encontrar a alguien que ya esté hablando del problema que estás enfrentando.

Artículos relacionados