designly1 / nextjs13-progress

An implementation of n-progress for use with the Next.js 13 app router.
MIT License
12 stars 5 forks source link

Missing types in dependencies #4

Open designly1 opened 6 months ago

designly1 commented 6 months ago

Missing dependency types during build in Next.js App.

Error Message:

 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

Type error: Cannot find type definition file for 'istanbul-lib-coverage'.
  The file is in the program because:
    Entry point for implicit type library 'istanbul-lib-coverage'

 ELIFECYCLE  Command failed with exit code 1.

Steps to recreate:

npx create-next-app@latest

npm i nextjs13-progress

Import Next13NProgress into layout.tsx

Create a link and try to build app.

Abdulrahim2567 commented 6 months ago

Hello, I followed the steps in hopes of recreating this issue but everything worked out at the end. succeeded to build the project without any issue.

Here is what I did;

pnpm create next-app@latest

pnpm i nextjs13-progress making sure the version says 1.3.0 in package.json

and I imported Next13NProgress in the layout

Created a link with npm link and built the app pnpm build and the build was successful with the following messages

`

next build

▲ Next.js 14.2.3

Creating an optimized production build ... ✓ Compiled successfully ✓ Linting and checking validity of types ✓ Collecting page data ✓ Generating static pages (5/5) ✓ Collecting build traces ✓ Finalizing page optimization `

However, I did some research and found out that the error message indicates that the TypeScript compiler is looking for type definitions for the istanbul-lib-coverage library, but it cannot find them. This happens when a package implicitly depends on another package that doesn't have its type definitions installed.

I'd suggest you try the following solution in the project;

try installing the missing type definitions for istanbul-lib-coverage. with the command:

npm install --save-dev @types/istanbul-lib-coverage

Also ensure that your tsconfig.json includes the type definitions. Your tsconfig.json should have the types added for the instanbul-lib-coverage in the compiler options:

"compilerOptions": { "types": ["node", "@types/istanbul-lib-coverage"] } while making sure TypeScript and ESLint configurations are not conflicting.

if the issues persists, perhaps installing the istanbul-lib-coverage package directly with npm or pnpm may solve the issue.

Hope this could be of help.

designly1 commented 6 months ago

Hi, thanks. Yeah I figured it was a problem with my typescript installation. I went ahead and updated my typescript and it fixed it. I will try removing those dev deps from the package and try again. Thanks again!

Jay

------ Original Message ------ From "Abdulrahim2567" @.> To "designly1/nextjs13-progress" @.> Cc "Jay Simons" @.>; "Author" @.> Date 5/21/2024 4:15:57 AM Subject Re: [designly1/nextjs13-progress] Missing types in dependencies (Issue #4)

Hello, I followed the steps in hopes of recreating this issue but everything worked out at the end. succeeded to build the project without any issue.

Here is what I did;

pnpm create @.***

pnpm i nextjs13-progress making sure the version says 1.3.0 in package.json

and I imported Next13NProgress in the layout

Created a link with npm link and built the app pnpm build and the build was successful with the following messages

`

next build

▲ Next.js 14.2.3

Creating an optimized production build ... ✓ Compiled successfully ✓ Linting and checking validity of types ✓ Collecting page data ✓ Generating static pages (5/5) ✓ Collecting build traces ✓ Finalizing page optimization `

However, I did some research as I found out that the error message indicates that the TypeScript compiler is looking for type definitions for the istanbul-lib-coverage library, but it cannot find them. This happens when a package implicitly depends on another package that doesn't have its type definitions installed.

I'd suggest you try the following solution in the project;

try installing the missing type definitions for istanbul-lib-coverage. with the command:

npm install --save-dev @types/istanbul-lib-coverage

Also ensure that your tsconfig.json includes the type definitions. Your tsconfig.json should have the types added for the instanbul-lib-coverage in the compiler options:

"compilerOptions": { "types": ["node", @.***/istanbul-lib-coverage"] } while making sure TypeScript and ESLint configurations are not conflicting.

if the issues persists, perhaps installing the istanbul-lib-coverage package directly with npm or pnpm may solve the issue.

Hope this could be of help.

— Reply to this email directly, view it on GitHub https://github.com/designly1/nextjs13-progress/issues/4#issuecomment-2122158684, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALHCNZAGNK6N3T2O3NT5YKTZDMGE3AVCNFSM6AAAAABIAJ56TGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRSGE2TQNRYGQ. You are receiving this because you authored the thread.Message ID: @.***>

designly1 commented 6 months ago

So I get a type error when I try to use Link with target="_blank" in an existing app, but I spun up a new Next.js app and the error doesn't occur. All of the versions of next, ts and react, etc are all the same. Any ideas?

(See attachment)

Jay

------ Original Message ------ From @." @.> To "designly1/nextjs13-progress" @.***> Date 5/21/2024 5:38:13 PM Subject Re[2]: [designly1/nextjs13-progress] Missing types in dependencies (Issue #4)

Hi, thanks. Yeah I figured it was a problem with my typescript installation. I went ahead and updated my typescript and it fixed it. I will try removing those dev deps from the package and try again. Thanks again!

Jay

------ Original Message ------ From "Abdulrahim2567" @.> To "designly1/nextjs13-progress" @.> Cc "Jay Simons" @.>; "Author" @.> Date 5/21/2024 4:15:57 AM Subject Re: [designly1/nextjs13-progress] Missing types in dependencies (Issue #4)

Hello, I followed the steps in hopes of recreating this issue but everything worked out at the end. succeeded to build the project without any issue.

Here is what I did;

pnpm create @.***

pnpm i nextjs13-progress making sure the version says 1.3.0 in package.json

and I imported Next13NProgress in the layout

Created a link with npm link and built the app pnpm build and the build was successful with the following messages

`

next build

▲ Next.js 14.2.3

Creating an optimized production build ... ✓ Compiled successfully ✓ Linting and checking validity of types ✓ Collecting page data ✓ Generating static pages (5/5) ✓ Collecting build traces ✓ Finalizing page optimization `

However, I did some research as I found out that the error message indicates that the TypeScript compiler is looking for type definitions for the istanbul-lib-coverage library, but it cannot find them. This happens when a package implicitly depends on another package that doesn't have its type definitions installed.

I'd suggest you try the following solution in the project;

try installing the missing type definitions for istanbul-lib-coverage. with the command:

npm install --save-dev @types/istanbul-lib-coverage

Also ensure that your tsconfig.json includes the type definitions. Your tsconfig.json should have the types added for the instanbul-lib-coverage in the compiler options:

"compilerOptions": { "types": ["node", @.***/istanbul-lib-coverage"] } while making sure TypeScript and ESLint configurations are not conflicting.

if the issues persists, perhaps installing the istanbul-lib-coverage package directly with npm or pnpm may solve the issue.

Hope this could be of help.

— Reply to this email directly, view it on GitHub https://github.com/designly1/nextjs13-progress/issues/4#issuecomment-2122158684, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALHCNZAGNK6N3T2O3NT5YKTZDMGE3AVCNFSM6AAAAABIAJ56TGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRSGE2TQNRYGQ. You are receiving this because you authored the thread.Message ID: @.***>

Abdulrahim2567 commented 6 months ago

Hello @designly1 I am sorry for commenting just now, had a lot on my plate lately. I will create a pull request to solve the target prop issue.