Далее js застрял при загрузке домашней страницы - PullRequest
Новая
       18

Далее js застрял при загрузке домашней страницы

0 голосов
/ 07 марта 2020

Я работаю над сайтом, созданным с помощью Next js. Но когда я запускаю его на своем локальном компьютере, он ничего не загружает в консоль, просто показывает [ 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

1 Ответ

0 голосов
/ 20 марта 2020

Сегодня я тоже сталкиваюсь с этой проблемой, и мне требуются часы, чтобы понять ее, моя ложь находится в файле 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;
    },
};
...