документ не определен при запуске производственного сервера, как исправить эту ошибку? - PullRequest
Новая
       36

документ не определен при запуске производственного сервера, как исправить эту ошибку?

1 голос
/ 27 марта 2020

Я пытаюсь заставить универсальное приложение реагировать js на этот репозиторий https://github.com/jakoblind/universal-react-server-bundle, и теперь я на последнем шаге запускаю сервер с помощью этой командной строки сервер узла. js но он выдает мне ошибку: 

  $(document).ready(function() {
          ^
    ReferenceError: document is not defined
        at Lightbox.init (/home/adnane/Bureau/main-app/node_modules/lightbox2/dist/js/lightbox.js:78:7)
        at new Lightbox (/home/adnane/Bureau/main-app/node_modules/lightbox2/dist/js/lightbox.js:34:10)
        at /home/adnane/Bureau/main-app/node_modules/lightbox2/dist/js/lightbox.js:558:10
        at /home/adnane/Bureau/main-app/node_modules/lightbox2/dist/js/lightbox.js:24:26
        at Object.<anonymous> (/home/adnane/Bureau/main-app/node_modules/lightbox2/dist/js/lightbox.js:29:2)
        at Module._compile (internal/modules/cjs/loader.js:936:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
        at Module.load (internal/modules/cjs/loader.js:790:32)
        at Function.Module._load (internal/modules/cjs/loader.js:703:12)
        at Module.require (internal/modules/cjs/loader.js:830:19)

.babelr c

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "react-hot-loader/babel",
        "transform-object-rest-spread",
        "transform-regenerator",
        "@babel/plugin-transform-async-to-generator"
    ]
}

webpack.config. js

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');

const clientConfig = {
    entry: ["@babel/polyfill", './src/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'public/client.bundle.js'
    },
    module: {
        rules: [
            {
                // test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.(png|jpe?g|gif|pdf|mp4)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
            {
                test: /(\.css$)/,
                loaders: [
                    'css-loader', 'postcss-loader'
                ]
            }, 
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|pdf|mp4)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    }
};

const serverConfig = {
    entry: ["@babel/polyfill", './server.js'],
    target: "node",
    devtool: "source-map",
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'server.bundle.js'
    },
    module: {
        rules: [
            {
                // test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.(png|jpe?g|gif|pdf|mp4)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
            {
                test: /(\.css$)/,
                loaders: [
                    'css-loader', 'postcss-loader'
                ]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|pdf|mp4)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin({
            banner: 'require("source-map-support").install();',
            raw: true,
            entryOnly: false
        })
    ]
};

module.exports = [clientConfig, serverConfig];

сервер. js

import express from "express";
import path from "path";
import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "./src/App.js";
import "regenerator-runtime/runtime";

function handleRender(req, res) {
    const reactHtml = ReactDOMServer.renderToString(<App />);
    const htmlTemplate = `<!DOCTYPE html>
<html>
    <head>
        <title>Universal React server bundle</title>
    </head>
    <body>
        <div id="app">${reactHtml}</div>
        <script src="public/client.bundle.js"></script>
    </body>
</html>`;
    res.send(htmlTemplate);
}

const app = express();

app.use("/public", express.static("./public"));

app.get("*", handleRender);
app.listen(3000);
console.log("App is running on http://localhost:3000");

index. js 

import React from "react";
import ReactDOM from "react-dom";
import ReactDOMServer from 'react-dom/server';
import "./index.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Popper from "popper.js";
import App from "./App";
import * as serviceWorker from './serviceWorker';
import "regenerator-runtime/runtime.js";

ReactDOM.render(<App />, document.getElementById("root"));
serviceWorker.register();

Пожалуйста, помогите мне, как исправить эту ошибку

...