如何克服由于Next.JS应用程序的相对路径和自定义导入而导致的构建时错误?

时间:2018-12-16 21:48:05

标签: node.js reactjs next.js

已在Python,PHP等环境中回答了该问题,但我找不到我正在创建的Next.JS博客的特定答案。每次构建时,都会从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

从我的项目文件夹的屏幕截图中可以看到,我的项目文件夹中的所有自定义依赖项线程。

Project folder with relevant dependencies highlighted.

我的package.json文件如下:

{
    "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"
}

我尝试了变体,例如“ require('./ api / posts')”和“ require('api / posts /')”,但似乎什么也找不到。例如,如果我将路径更改为“ require('./ api / posts /')”并使用Next.JS“ build”脚本,则会出现以下错误:

> 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

入口点正确,项目文件夹结构正确,等等,但是没有理由不能定位例如我看到的“ /api/posts/”。

1 个答案:

答案 0 :(得分:0)

如果您要正确导入模块,我很好奇

例如:

如果要将components/Post导入到pages/index.js中,应该如下所示:import Post from '../components/Post';

让我知道这是否可行

致谢