时间戳

首页 > 解决方案 > 如何克服由于 Next.JS 应用程序的相对路径和自定义导入导致的构建时错误？

node.js - 如何克服由于 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

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

突出显示相关依赖项的项目文件夹。

我的 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/'。

标签： node.jsreactjsnext.js

解决方案

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

例如：

如果你想导入components/Post这个pages/index.js应该是这样的：import Post from '../components/Post';

让我知道这个是否奏效，

问候

推荐阅读