title: How do I overcome build-time errors due to relative paths and custom imports with Next.JS applications?
body: <p>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:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>As you can see from the screen grab of my project folder, all the custom dependencies thread from my project folder.</p>
  
  <p><a href="https://i.stack.imgur.com/bIfXl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bIfXl.png" alt="Project folder with relevant dependencies highlighted."></a></p>
  
  <p>My package.json file looks like this:</p>
  
  <pre><code>{
      "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\" &amp;&amp; exit 1",
          "dev": "next",
          "build": "next build",
          "start": "next start"
      },
      "author": "Joel J. Warne",
      "license": "ISC"
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&gt; 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
  </code></pre>
  
  <p>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.</p>