Why can't Next.js import files under a folder

Question

Module not found: Can't resolve 'components/layout's Codes\nextjs-blog\pages\posts'
> 1 | import Layout from 'components/layout'
  2 | import Link from 'next/link'
  3 | import Head from 'next/head'

Ok so this is the error message I'm getting what's going anyone have an idea

I have my components folder under nextjs-blog and the js file that gives the error is under posts

I didn't give much info because I'm new to Next js and don't know what anyone would need

it doesn't work if I do

import Layout from '../components/layout'

Desktop/Marti's Codes/nextjs-blog <- this is the path to basic nextjs folder I've changed almost nothing to the folder in code and files

I have added components folder in the basic folder and in components I have two files : layout.js layout.module.js

then in pages I have posts folder and in there first-post.js which is the file importing the layout files from components

What about import Layout from '../../components/layout'? That's seems like the right relative path from what you described. — juliomalves
– juliomalves, Commented Jan 6, 2021 at 14:11
I was pretty sure I tried '../../components/layout' but it seems to work thanks — TechX
– TechX, Commented Jan 6, 2021 at 14:26

TechX · Accepted Answer · 2021-01-06 14:27:43Z

3

It should be

import Layout from '../../components/layout'

Thanks to juliomalves for the answer

answered Jan 6, 2021 at 14:27

TechX

772 silver badges11 bronze badges

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

Comments

Shyam · Accepted Answer · 2021-01-06 10:18:34Z

2

You need to use relative path to import components i.e. ../components/layout.

To use absolute imports like components/layout, we setup aliases like below in jsconfig.json.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

and use like this

import Layout from '@/components/layout'

Refer: https://nextjs.org/docs/advanced-features/module-path-aliases

answered Jan 6, 2021 at 10:18

Shyam

1,4548 silver badges13 bronze badges

2 Comments

TechX Over a year ago

Ok the example I was using at the start showed me to use it like that but it did no difference

Shyam Over a year ago

can you share the folder location of the component and your pages folder?

Collectives™ on Stack Overflow

Why can't Next.js import files under a folder

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related