Nextjs 卡住加载主页答案

【问题标题】：Nextjs stuck loading the home pageNextjs 卡住加载主页
【发布时间】：2020-06-20 03:21:51
【问题描述】：

我正在开发一个使用 Nextjs 创建的网站。但是当我在本地运行它时，它不会在控制台上加载任何内容，只显示[ event ] build page: /_error。我试图记录_error.js，但没有显示任何内容。以下是我的配置：

server/index.js

// Use dotenv Config Package
const dotenv = require('dotenv');
// Express Package and Next Package For Run server
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const next = require('next');
const nextI18NextMiddleware = require('next-i18next/middleware').default
dotenv.config();

const NextI18NextInstance = require('../i18n');
const port = parseInt(process.env.PORT, 10) || 3000; // Port Application Run Load From dotenv File
const dev = process.env.NODE_ENV !== 'production'; // Application Run Environment Load From dotenv File
const app = next({ dev }); // Add Loaded Config to Application
const handle = app.getRequestHandler();

const proxyOptions  = {
    target: process.env.API_PROXY_URL + ':' + process.env.API_PROXY_PORT,
    changeOrigin: true,
    ws: true,
};

const devProxy = createProxyMiddleware(proxyOptions);

app.prepare()
    .then(() => {
        // Run Express Server
        const server = express();

        server.use(nextI18NextMiddleware(NextI18NextInstance));

        server.use('/api', devProxy);




        // Handle All Server Requests And Responses
        server.all('*', (req, res) => {
            return handle(req, res);
        });

        // Server Listen Port Config
        server.listen(port, err => {
            if (err) throw err;
            console.log(`> Ready on http://localhost:${port}`);
        });

    })
    // Application Catch Error On Run Server
    .catch(ex => {
        console.error(ex.stack);
        process.exit(1);
    });

i18n.js

// Import Next i18n Package
const NextI18Next = require('next-i18next').default;

// Create and Export Default i18n Config Module use in Whole Project
const languages = ['fa-IR', 'en-US'];
const options = {
    defaultLanguage: 'fa', // Default Language
    otherLanguages: ['en'], // Other Languages Can Add In Array
    // browserLanguageDetection: true, // Detect Language From Browser Meta
    defaultNS: 'common', // Default File Load in Ns
    localeExtension: 'json', // Default language Files Extension
};

const NextI18NextInstance = new NextI18Next(options);

NextI18NextInstance.i18n.languages = languages;

module.exports = NextI18NextInstance;

pages/index.js

import React, { Component } from 'react';
import {SiteLayout} from '../components';
import { i18n,withTranslation } from '../i18n'

class MainPage extends Component {

    render() {
        return (
            <SiteLayout pageTitle={'صفحه اصلی'}>
                {this.props.t('mainPage')}
            </SiteLayout>
        );
    }
}

MainPage.getInitialProps = async () => ({
    namespacesRequired: ['MainPage'],
});

export default withTranslation('MainPage')(MainPage);

在服务器启动并显示> Ready on http://localhost:3000 后，我在终端中得到以下输出，并且浏览器卡住了加载页面。如果您需要更多信息，请询问。有什么想法如何调试或修复它？提前致谢。

[HPM] Proxy created: /  -> https://myapi**.com:
> Ready on http://localhost:3000
[ event ] build page: /_error

【问题讨论】：

你得到这个答案了吗？
也有这个问题，我可以看到我正在使用的库有时会导致此问题，但由于我看不到错误消息，所以不知道确切的错误。

标签： reactjs next.js i18next

【解决方案1】：

Solved.How？首先我尝试删除 node_modules 并重新安装它们，没有运气。之后我将 next.js 版本 11 升级到版本 12 并且编译效果很好。您可以在文档升级过程中查看这里upgrade process

【讨论】：

【解决方案2】：

今天我也遇到了这个问题，我花了好几个小时才弄清楚，我的错误在 next.config.js 文件中。请检查它是否对您有帮助。

const path = require("path");
const subFolder = 'src';
module.exports = {
    webpack: config => {
        config.node = {
            fs: "empty"
        };

        // You can see MANY IMPLEMENTED ALIASES when printing this:
        console.log(config.resolve.alias);

        // So if you want to add your own aliases, don't replace the old one:
        // PLEASE DON'T DO THIS >>>
        // config.resolve.alias = {
        //     "@components": path.join(__dirname, "components"),
        //     "@pages": path.join(__dirname, "pages"),
        //     "@redux": path.join(__dirname, "redux"),
        //     "@api": path.join(__dirname, "api")
        // };
        // <<< PLEASE DON'T DO THIS


        // DO THIS INSTEAD >>>
        config.resolve.alias = {
            ...config.resolve.alias // <<< ADD THIS LINE to extend the old one
            "@components": path.join(__dirname, "components"),
            "@pages": path.join(__dirname, "pages"),
            "@redux": path.join(__dirname, "redux"),
            "@api": path.join(__dirname, "api")
        };
        // <<< DO THIS INSTEAD
      return config;
    },
};

【讨论】：