Module not found: Can't resolve 'ponents/layout's Codes\nextjs-blog\pages\posts'
> 1 | import Layout from 'ponents/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 ponents 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 '../ponents/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 ponents folder in the basic folder and in ponents 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 ponents

Module not found: Can't resolve 'ponents/layout's Codes\nextjs-blog\pages\posts'
> 1 | import Layout from 'ponents/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 ponents 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 '../ponents/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 ponents folder in the basic folder and in ponents 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 ponents

• javascript
• reactjs
• next.js

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

2 Answers 2

It should be

import Layout from '../../ponents/layout'

Thanks to juliomalves for the answer

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

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

{
  "pilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/ponents/*": ["ponents/*"]
    }
  }
}

and use like this

import Layout from '@/ponents/layout' 

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