Nextjs buil fails on Linting and checking validity of types when node_module package has type import

Question

NextJS 13 project with package that has an inner core dependency (react-leaflet->@react-leaflet/core).

yarn run build Build fails on "Linting and checking validity of types"

Seems like some typescript compatibility issue regarding import {type MyType}

Link to specific file on dependency

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"
  ]
}

Expecting yarn run build to compile successfully

Issue resolve:

Resolved by using yarn upgrade --latest to upgrade typescript version.

Corinecorinna

Answer 1

Resolved by using yarn upgrade --latest to upgrade typescript version.

The issue was caused after migrating from NextJS 11

Resolved package.json:

{
  "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"
  }
}

Corinecorinna

Answer 2

The linter does not expect to see two words without a comma.

Besides that, it's not necessary to write 'type', one can import types without declaring 'type' in front. NextJS will treeshake your app, and only compile code that needs to be there. You don't have to worry about that.

The dependency is probably made without considerations for frameworks like Next.

Try modifying the file in node_modules and remove type declarations:

import React, {MutableRefNode, ReactNode} from react;

I suggest opening an issue/discussion on the packagespackage's GitHub. That is, unless you can find someone already talking about the problem you're facing.

Dardanelles

Thanks for your answer but the code is comming from an inner dependency which has none of my input. – Corinecorinna

I updated my answer to better reflect the issue at hand. – Dardanelles

Already have all types in dev dependency section on package.json – Corinecorinna

Then I suggest editing the package files by yourself, and opening an issue on the GitHub. – Dardanelles

Answer 3

In my case I wasn't stopped dev server ctrl+c, stopped it then deleted old .next file from root then started making build by yarn run build

Autocrat

Answer 4

The linter does not expect to see two words without a comma.

Besides that, it's not necessary to write 'type', you can import types without declaring 'type' in front. In this case, it breaks your development flow. NextJS will treeshake your app, and only compile code that needs to be there. You don't have to worry about that.

Try this: import React, {MutableRefNode, ReactNode} from react;

If you really want to declare type, even though it's not necessary; I suggest opening an issue/discussion on NextJS GitHub. That is, unless you can find someone already talking about the problem you're facing.

Ochoa