When a node_module package includes type imports, Next.js can encounter build failures during the linting and type validity checking processes

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

When running yarn run build, the build fails at "Linting and checking validity of types."

It appears to be a TypeScript compatibility issue related to import {type MyType}.

Link to specific file in the dependency

https://i.sstatic.net/CE6A7.png

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

After expecting yarn run build to compile successfully, the issue was resolved by using yarn upgrade --latest to update the typescript version.

typescriptnpmnext.jsvercelreact-leaflet

Answer №1

Solved by running yarn upgrade --latest to update the version of typescript.

The issue arose during the transition from NextJS 11

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

Answer №2

The code validator doesn't expect to encounter two words without a comma.

Furthermore, there's no need to specify 'type', as you can simply import types without the 'type' declaration upfront. Doing so can disrupt your workflow. NextJS will optimize your application by only compiling necessary code components. You need not be concerned about this.

Consider importing React, {MutableRefNode, ReactNode} from react;

If you still want to explicitly declare type, even though it's unnecessary, consider raising an issue on NextJS GitHub for discussion. Alternatively, see if someone else has addressed the same problem you're experiencing.

Answer №3

The code checker doesn't anticipate encountering two words without a comma.

In addition, it's not mandatory to specify 'type'; you can import types without explicitly stating 'type' upfront. NextJS will optimize your application by only compiling necessary code. Thus, there's no need to be concerned about this issue.

It's likely that the dependency was created without considering frameworks like Next.

Try editing the file in node_modules and remove any type declarations:

import React, {MutableRefNode, ReactNode} from react;

I recommend initiating an issue/discussion on the package's GitHub repository. Unless someone else has already addressed the problem you're encountering.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the NPM package manager in the zsh shell on Ubuntu within a Windows 10

After transitioning to the zsh for coding in Python and configuring the environment variables, I am now encountering an issue while trying to start a small JavaScript project. The problem arises when attempting to use npm, as initializing the repo results ...

javascriptnode.jsubuntunpmzsh

The imported variables are of a union type

In my nextjs project, I developed a customized hook to determine if a specific container is within the viewport using the intersection observer. Here's the code for the custom hook: import { useEffect, useRef, useState } from 'react'; cons ...

reactjstypescriptreact-hooksnext.jsunion-types

How can one implement closure in Angular 4?

I am looking to implement a nested function within another function in Angular 4 for closure. However, when attempting the code below, I encounter an error stating "cannot find name innerFn" outerFn(){ let a = "hello"; innerFn(){ console.log(a ...

javascriptangulartypescript

There is a chance that the object could be 'undefined' when attempting to add data to it

I created an object and a property called formTemplateValues. I am certain that this property exists, but I am getting an error message saying: "Object is possibly 'undefined'". It should not be undefined because I specifically created it. Why am ...

typescript

getting TypeScript configured with webpack

I am currently using Typescript to develop a back-end API utilizing graphql and express. To manage the project development and building process, I have implemented webpack. As part of my setup, I am employing raw-loader in order to load graphql schemas an ...

typescriptexpresswebpackts-loader

Avoid the import of @types definition without exports in TypeScript to prevent the error TS2306 (not a module)

I have spent a considerable amount of time trying to load a NodeJS library that has what I believe is a faulty type definition in the @types repository. The library in question is geolib and its types can be found in @types/geolib Although I am aware tha ...

node.jstypescript

Revamping elements according to ordered array. Angular version 4.3

Dealing with an array of data that needs to be sorted for displaying in a component seems to be a challenge. Despite having a functional code sample demonstrating the concept, the sorting is not reflected in the Angular app's DOM. The original data i ...

javascriptarraysangulartypescript

The Angular service successfully provides a value, yet it fails to appear on the webpage

Currently, I am starting to dive into Angular from the ground up. One of my recent tasks involved creating a component called 'mylink' along with a corresponding service. In my attempt to retrieve a string value from the service using 'obse ...

htmlangulartypescript

Having Trouble Locating UiAutomator2 in Appium for Android with Python?

I keep encountering an error even though I have confirmed that uiautomator2 is installed correctly. It's puzzling to me, perhaps it has something to do with my desired capabilities? In the past, I've used cloud Appium without issues, but this tim ...

node.jsnpmappiumappium-androidpython-appium

Discovering Intercepted Paths in Next.js 13 without the Need for a Full Page Reload

I have been developing a Next.js application that incorporates the Intercepting Routes feature. Within my app directory, I have organized the structure as follows: /news/[id]/page.jsx /@modal/(.)news/[id]/page.jsx The specific behavior I aim to achieve i ...

reactjsnext.jsnext.js13

Changing a complex object within a nested array of a BehaviorSubject

I'm currently working on an Angular app. Within my service, DocumentService, I have a BehaviorSubject that holds an array of Documents. documents: BehaviorSubject<Document[]> Let me provide you with some insight into the various classes I' ...

javascriptangulartypescriptrxjs

Typescript: Utilizing a generic array with varying arguments

Imagine a scenario where a function is called in the following manner: func([ {object: object1, key: someKeyOfObject1}, {object: object2, key: someKeyOfObject2} ]) This function works with an array. The requirement is to ensure that the key field co ...

typescript

Exploring the feature of On Demand Cache Revalidation in Next JS 13 with a remote ASP .NET Core backend

Seeking guidance on leveraging NextJS cache revalidation for a specific use case that seems unique. Currently, I am in the process of developing an online food ordering platform where numerous restaurants (currently 30) can publish their menus for customer ...

asp.net-corecachingnext.jsnext.js13

Facing Issues with Next-Auth and FaunaDB Integration: Troubleshooting Session Errors in

I have successfully implemented Next-Auth with FaunaDB in my NextJS project. It is working well in my production environment, but I am facing issues in my development environment which is using the Fauna Dev docker container instead of the cloud-based data ...

next.jsfaunadbnext-auth

Taking out the modal element from the document object model, causing the animation

I am currently working on a project using Next.js, Typescript, and Tailwind CSS. Within this project, I have implemented a modal component with some animations. However, I encountered an issue where the modal does not get removed from the DOM when closed, ...

javascriptreactjstypescriptnext.jstailwind-css

What approach is recommended for integrating Supabase authentication and database into a Next.js application?

I am embarking on a new app project using Next.js, with Supabase handling authentication and the database. Within my setup, I have authenticated users generated by Supabase along with a 'User' table where all user data essential for the app&apos ...

authenticationnext.jssupabasesupabase-database

Display a dynamic array within an Angular2 view

I have a dynamic array that I need to display in the view of a component whenever items are added or removed from it. The array is displayed using the ngOnInit() method in my App Component (ts): import { Component, OnInit } from '@angular/core' ...

javascriptangulartypescriptdynamic-arrays

Next.js experiences the loss of the image component upon applying flexbox styling

I'm experiencing a strange issue with an image disappearing when I add the flex class to its parent container in a React component. Below is a simplified version of the code snippet: <main className="flex"> <div className=' ...

next.jstailwind-css

Is it possible to utilize getStaticProps in a blog to automatically update whenever a new post is published?

I'm feeling a bit confused about the functionality of getStaticProps. getStaticProps is used during build time to create static pages. If I have a blog that needs to update whenever a new post is published, would it be incorrect to utilize getStatic ...

next.jsssg

Is there a way to align the line under the hyperlinks to match the text size using CSS?

<div className={styles.container}> <ul className={styles.links}> <li className={styles.link}> <a href="/">Home</a> </li> <li className={styles.link}> <a href="/portfolio& ...

htmlcssnext.js