Next.js Discord

Discord Forum

import Separator from '@/components/Separator';it won't recognise the path

Unanswered
American Sable posted this in #help-forum
Open in Discord
American SableOP
import Separator from '@/components/Separator';
my tsconfig for next:
"baseUrl": "./",
"paths": {
"@/": ["../../src/"],
"@/components/": ["../../src/components/"],
"@/styles/": ["../../src/styles/"]
}
my ts config for nest:
"outDir": "./dist",
"baseUrl": "./src",

Cannot find module '@/components/Separator' or its corresponding type declarations.ts(2307

i do not understand why the alias won't work no matter what i do 😦

68 Replies

adam.birds
Just use this
"paths": {
    "@/*": ["./src/*"],
},
@adam.birds Just use this json "paths": { "@/*": ["./src/*"], },
American SableOP
it was that way initially but it did not work
could it be some conflict between nest and next?
adam.birds
I don't know what nest is but if you have multiple projects intertwined it could be
American SableOP
nest is a backend like next is for frontend both are frameworks
@American Sable nest is a backend like next is for frontend both are frameworks
adam.birds
Probably is conflicting then, can you not use nextjs for frontend and backend?
@adam.birds Probably is conflicting then, can you not use nextjs for frontend and backend?
American SableOP
i don't think so i mean next is a frontend framework not a backend one no?
And the issue is probably you need your tsconfig.json inside the frontend directory.
American SableOP
each of them have a jsconfig file
tsconfig for front end is :
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"baseUrl": "./",
"paths": {
"@/": ["./src/"],
}
},
"include": ["next-env.d.ts", "/*.ts", "/.tsx", ".next/types/**/.ts"],
"exclude": ["node_modules"]
}
while nest is using :
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "ES2021",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./src",
"incremental": true,
"skipLibCheck": true,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"noImplicitAny": false,
"strictBindCallApply": false,
"noFallthroughCasesInSwitch": false
}
}
i will try to remove frontend to its own folder maybe that will solve the conflict
adam.birds
The only line i don't have in mine is the baseUrl
@adam.birds The only line i don't have in mine is the `baseUrl`
American SableOP
i mean if the default worked XD i would not change it
adam.birds
Just try this:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "bundler",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "plugins": [
            {
                "name": "next",
            },
        ],
        "paths": {
            "@/*": ["./src/*"],
        },
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
    "exclude": ["node_modules"],
}
American SableOP
i used your config and moved frontend into its own folder
i deleted next and rebuilt the project
adam.birds
Also, expand your components folder for me and show me the seperator
@adam.birds Also, expand your components folder for me and show me the seperator
American SableOP
export default function Separator() {
return <hr style={{ margin: "2.5rem 0", border: "1px solid #ddd" }} />;
}
Seperator.tsx
components has only 1 file
adam.birds
Sounds stupid but just remove the r of end of '@/components/Separator'; and add it back, sometimes it can just be VS Code being slow to pick it up lol.
American SableOP
import Separator from './components/Separator'; if i use a relative path it seems to work
but relative paths are generally not the best idea
this is a fresh project so i do not understand what the issue could be
layout.tsx
import Separator from './components/Separator';

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<Separator></Separator>
</html>
)}

is this okay to use the Seperator like this?
adam.birds
The seperator needs to be inside of the body.
American SableOP
import Separator from './components/Separator';

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<Separator></Separator>
</body>
</html>
)}
this fixes the issues but should i just use relative paths everywhere? i am on windows
adam.birds
Yeah that shouldn't cause any errors now. Also for ease of reading, use code blocks for your code. Three backticks above and below. And yeah not sure why the @ isn't working, maybe it is a windoes thing ive only ever developed with linux or mac. Maybe try using ubuntu for windows to develop on rather than windows itself.
American SableOP
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next",
},
],
"baseUrl": "./",
"paths": {
"@/": ["src/app/"],
},
},
"include": ["next-env.d.ts", "/*.ts", "/.tsx", ".next/types/**/.ts"],
"exclude": ["node_modules"],
}
it seems to work now
when i added /app
not sure why the default is src/app in vs code it puts them together not sure why
adam.birds
Oh, no, so your issue is keep the path as it was, bring your components dir out of app.

Or import as @/app/components
adam.birds
You want components to be stored at src/components. Keep app/ for your nextjs specific routes and pages.
@American Sable that could work also i can try
adam.birds
It will work. I hadn't realised your components where inside app, best to keep them outside.
@adam.birds It will work. I hadn't realised your components where inside app, best to keep them outside.
American SableOP
and it was causing me trouble too XD
but i think this way i made it will work now because it works fine with the backend and since backend has a base url of ./src it would conflict
now that 1 is ./src and other is ./src/app
its easier to work with
{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./src",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "noFallthroughCasesInSwitch": false
  }
}
{
  "compilerOptions": {
      "target": "es5",
      "lib": ["dom", "dom.iterable", "esnext"],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "bundler",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve",
      "incremental": true,
      "plugins": [
          {
              "name": "next",
          },
      ],
      "paths": {
          "@/*": ["./src/app/*"],
      },
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"],
}
do you suggest i keep a base url or just keep this 1 path? ( if i remove app there would be a problem since in same directory i have 2 projects using ./src as main route
adam.birds
The ./src won't conflict with each other. It was just your folder was in the wrong place. It isn't recommended to keep your components folder or any other folders you end up with like utils etc inside /app
The ./src is limited to that fodler so it won't conflict.
You don't need the baseUrl
American SableOP
i will try to make a new project and see if it gives me an app like it did here
maybe i messed up while i was making the project
adam.birds
You literally just need to move your components folder outside of app and into src
American SableOP
okay but when one creates a new project does it by default make the path src/app?
adam.birds
Yes. App is meant to be there for your routes.
@adam.birds Yes. App is meant to be there for your routes.
American SableOP
okay so why does vs code lump them together as if its a single folder?
adam.birds
Because there is nothing else inside src yet, if you drag, components to src it will no longer be nested.
i appreciate your help ❤️
adam.birds
Basically, you want a structure like this:

📦src
 ┣ 📂app
 ┃ ┣ 📂api
 ┃ ┣ 📂auth
 ┃ ┃ ┗ 📂login
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂dashboard
 ┃ ┃ ┣ 📂posts
 ┃ ┃ ┃ ┣ 📂[post_id]
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┃ ┣ 📂new
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📜layout.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📜globals.css
 ┃ ┣ 📜layout.tsx
 ┃ ┣ 📜not-found.tsx
 ┃ ┗ 📜providers.tsx
 ┣ 📂components
 ┃ ┣ 📂cms
 ┃ ┃ ┣ 📂navigation
 ┃ ┃ ┃ ┣ 📜NavBar.tsx
 ┃ ┃ ┃ ┗ 📜Sidebar.tsx
 ┃ ┃ ┣ 📂seo
 ┃ ┃ ┃ ┗ 📜SEOSidebar.tsx
 ┃ ┃ ┗ 📂ui
 ┃ ┃ ┃ ┣ 📂dropdowns
 ┃ ┃ ┃ ┃ ┗ 📜MultiSelectDropdown.tsx
 ┃ ┃ ┃ ┗ 📂markdown
 ┃ ┃ ┃ ┃ ┗ 📜MarkdownEditor.tsx
 ┃ ┗ 📂common
 ┃ ┃ ┣ 📂ads
 ┃ ┃ ┃ ┗ 📜googleAdsenseComponent.tsx
 ┃ ┃ ┣ 📂gtm
 ┃ ┃ ┃ ┗ 📜gtmComponent.tsx
 ┃ ┃ ┣ 📂icon
 ┃ ┃ ┃ ┗ 📜Icon.tsx
 ┃ ┃ ┣ 📂initials
 ┃ ┃ ┃ ┗ 📜InitialsComponent.tsx
 ┃ ┃ ┣ 📂loading
 ┃ ┃ ┃ ┗ 📜LoadingComponent.tsx
 ┃ ┃ ┗ 📂logo
 ┃ ┃ ┃ ┗ 📜LogoComponent.tsx
 ┣ 📂types
 ┃ ┗ 📜contentAnalysis.ts
 ┣ 📂utils
   ┗ 📜textUtils.ts
adam.birds
There is a VSCode extension called file-tree-generator that will generate the file tree for you. And then i imported in disocrd inside a code block using the three backticks
American SableOP
vscodium may not have that extention sadly but its quite nice
American SableOP
@adam.birds just wanted to say thank you for everything
adam.birds
No problem @American Sable