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

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

Steps to forward a restricted user to a specific webpage

I am currently utilizing NextJs and am in the process of creating a redirecting function for users who have been banned or blocked from accessing the DB/session. My attempt at this involved: redirect.js, where I created a custom redirect function. impo ...

javascriptreactjsnext.js

Tips for verifying that parameters possess designated characteristics in TypeScript

How can I ensure that data2 and data3 work correctly, while data1 triggers an error if the data type is not specified as shown in the code below? I need to validate that when a user enters params like {name: 'aa', age: 20}, it should throw an er ...

typescript

Node Modular Design

Currently, I am in the process of developing a nodejs application that has grown quite large. In order to avoid having a monolithic node application, I decided to take an architectural approach by breaking down various components into separate npm modules. ...

node.jsarchitecturenpm

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

I am facing an issue with my form validation logic. I have a set of checkboxes that need to be validated only when a specific value is selected from a dropdown. The current validator checks the checkboxes regardless of the dropdown value. Here's the c ...

javascriptangulartypescriptvalidation

Having trouble with the installation of global Node modules. Getting an error message saying "command

I'm facing an issue with installing global node modules. Despite suggestions online to simply add -g, that doesn't seem to be the solution for me. I suspect it might be a problem with linking or incorrect directory setup. This is my process: $ ...

node.jsterminalinstallationnpm

Add a npm module without type definitions

I am currently utilizing Typescript version 2.1 and facing an issue with installing an npm package called 'reactable' that lacks typings. When attempting to import the package using import * as Reactable from 'reactable', Typescript di ...

javascripttypescriptnpm

Creating dynamic JSX content in NextJS/JSX without relying on the use of dangerouslySetInnerHTML

I have a string that goes like "Foo #bar baz #fuzz". I'm looking to create a "Caption" component in NextJS where the hashtags become clickable links. Here's my current approach: import Link from "next/link"; const handleHashTag = str => st ...

javascriptreactjsjsxnext.js

Trigger the Angular Dragula DropModel Event exclusively from left to right direction

In my application, I have set up two columns using dragula where I can easily drag and drop elements. <div class="taskboard-cards" [dragula]='"task-group"' [(dragulaModel)]="format"> <div class="tas ...

angulartypescriptdrag-and-dropdragulang2-dragula

Is it possible to extract individual values from the outcome of an SWR query using destructuring?

I'm encountering a simple issue with calling an external API: const fetcher = (...args) => fetch(...args).then(x=>x.json()) const {data:{results}, error} = useSWR("https://xxxxxxxxxxxxxxxx",fetcher) Every time I attempt to destructu ...

reactjsnext.jsundefinedswrdestructure

What is the best way to utilize the typescript module for detecting and managing typescript errors and warnings in your code?

Currently, I am experimenting with the typescript module to programmatically detect typescript errors. Below is a simplified version of what I have been working on: var ts=require('typescript') var file_content=` interface Message{ a:string ...

typescript

The error in Angular 6 is that the property 'controls' is not available on the type 'AbstractControl'

What happens when we use setvalue in a for loop? Everything seems to be running smoothly, but unfortunately an error is thrown: The property 'controls' is not recognized on the type 'AbstractControl'. In Angular 6, how can we resol ...

angulartypescriptangular6

An error occurred while trying to add a property to an array because the object is not extensible: TypeError -

In my code, there is an object named curNode with the following structure: { "name": "CAMPAIGN", "attributes": {}, "children": [] } I am attempting to add a new node to the object like this: curNode!.children!.push({ name: newNodeName, ...

javascripttypescript

Angular Error: The first argument has a property that contains NaN

Struggling with a calculation formula to find the percentage using Angular and Typescript with Angularfire for database storage. Encountered an error stating First argument contains NaN in property 'percent.percentKey.percentMale. The properties are d ...

angulartypescriptfirebaseangularfire2

What is the process for performing type checking on an array variable designated as "as const"?

Check out this code snippet: export type Types = 'a' | 'b'; export type MyPartials = { readonly [P in keyof Types]?: number; }; export interface MyI { readonly name: string; readonly myPartials: MyPartials; } export const myI ...

typescripttypes

Typescript struggling to load the hefty json file

Currently, I am attempting to load a JSON file within my program. Here's the code snippet that I have used: seed.d.ts: declare module "*.json" { const value: any; export default value; } dataset.ts: import * as data from "./my.json" ...

javascriptnode.jstypescript

The feature 'forEach' is not available for the 'void' type

The following code is performing the following tasks: 1. Reading a folder, 2. Merging and auto-cropping images, and 3. Saving the final images into PNG files. const filenames = fs.readdirSync('./in').map(filename => { return path.parse(filen ...

javascriptnode.jstypescripttypes

The customized component for the Strapi corporate starter template is failing to display

Despite following the official documentation for creating custom components for the Strapi corporate starter in Next.js on the Starter GitHub page, the component I created is not appearing on the website. The simple component I made is called "External Li ...

reactjsnext.jsstrapi

Should Bower and Grunt Be Installed Globally or Locally?

When it comes to installing packages globally, we typically avoid it due to the possibility of working on multiple projects simultaneously that require different versions of the same libraries. However, there seems to be conflicting information regarding t ...

javascriptnode.jsgruntjsnpmbower

What is the best way to deliver a file in Go if the URL does not correspond to any defined pattern?

I am in the process of developing a Single Page Application using Angular 2 and Go. When it comes to routing in Angular, I have encountered an issue. For example, if I visit http://example.com/, Go serves me the index.html file as intended with this code: ...

angularjsgotypescriptangularservemux

Is there a method, like an API, available in Node.js to programmatically execute a local npm publish command without using the spawning process?

I am in the process of retrieving a list of files from a local package that will be published via npm. I have found a potential solution by utilizing npm publish --dry-run using child_processes.spawn(...) or a similar method. However, this approach is no ...

node.jsnpm