How do I overcome build-time errors due to relative paths and custom imports with Next.JS applications? - node.js

Question

This question has been answered in response in the context of Python, PHP, etc., but I cannot find an answer specific to this Next.JS blog I am creating. Each time I build, I get the following error from nodemon:
These dependencies were not found:
* /api/posts in ./pages/index.js
* /components/Post in ./pages/index.js
* /layouts/Main in ./pages/index.js
* /routes in ./pages/index.js
As you can see from the screen grab of my project folder, all the custom dependencies thread from my project folder.
My package.json file looks like this:
{
"name": "revised-tottm",
"version": "1.0.0",
"description": "revised TOTTM website",
"main": "_document.js",
"dependencies": {
"next": "^7.0.2",
"next-routes": "^1.4.2",
"nodemailer": "^4.7.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"reactdom": "^2.0.0",
"static-server": "^2.2.1",
"styled-components": "^4.1.2",
"absolute-imports": "^1.0.1",
"body-parser": "^1.18.3",
"express": "^4.16.2",
"get-form-data": "^2.0.0"
},
"devDependencies": {
"babel-preset-env": "^1.5.2",
"babel-preset-react": "6.24.1",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^5.0.3",
"gulp-livereload": "^4.0.1",
"gulp-uglify": "^3.0.1",
"gulp-uglify-es": "^1.0.4",
"imagemin-jpeg-recompress": "^5.1.0",
"imagemin-pngquant": "^6.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start"
},
"author": "Joel J. Warne",
"license": "ISC"
}
And I have tried variants, e.g. "require('./api/posts')" and "require('api/posts/')" but nothing seems to find them. For instance, if I change the paths to "require('./api/posts/')" and use a Next.JS "build" script, I get the following error:
> Failed to build
{ Error: (client) ./pages/index.js
Module not found: Error: Can't resolve './api/posts' in '/Users/USERNAME/Library/Mobile Documents/com~apple~CloudDocs/WebDevStudio/Revised TOTTM/pages'
# ./pages/index.js 10:0-39 37:19-27
# multi ./pages/index.js
at /Users/USERNAME/Library/Mobile Documents/com~apple~CloudDocs/WebDevStudio/Revised TOTTM/node_modules/next/dist/build/index.js:144:31
The entry point is correct, the project folder structure is correct, etc., but there is no reason that it should not be able to locate, for instance, '/api/posts/' that I can see.

Answer 1

I'm curios if you are importing the modules propertly
For example:
If you want import components/Post into pages/index.js this should looks like this: import Post from '../components/Post';
Let me know if this works,
Regards