how do i using absolute paths in Next.js use typescript?

Question

main-layout.tsx

import React from 'react'
import { TLayout } from '@types';
import { Header } from '@common';
    
export function MainLayout({children}:TLayout) {
    return (
       <div>
        {children}
       </div>
      )
    }

index.ts

export * from './main-layout'

tsconfig.json

"paths": {
    "@layouts"["./components/layouts/index.ts"],
}

Terminal

error - ./pages/_app.tsx:5:0
    Module not found: Can't resolve '@layouts'

In my project I can't export from tsx file to ts file, while using ts to export ts can be used normally, how do I fix it?

pnxdxt · Accepted Answer · 2022-07-31 07:41:24Z

2

When settings the paths you are missing a : between you alias and its paths. It should be:

"@layouts" : ["./components/layouts/index.ts"],

Also make sure in your tsconfig.json that you have added a baseurl property. The most common example is:

    "baseUrl": ".",

Finally, most of the time you want to alias paths to folders rather than files. But that's up to you.

"@layouts" : ["./components/layouts/*"],

answered Jul 31, 2022 at 7:41

pnxdxt

1606 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how do i using absolute paths in Next.js use typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related