reactjs - 运行生产服务器时未定义文档,如何解决此错误?
问题描述
我正在尝试通过此存储库https://github.com/jakoblind/universal-react-server-bundle使应用程序反应 js 通用,现在我正在通过此命令行节点服务器运行服务器的最后一步。 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)
.babelrc
{
"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();
请帮助我如何解决此错误
解决方案
推荐阅读
- javascript - jQuery 用 .find 同步两个输入字段?
- javascript - 如何使用 _.cloneWith 来转换对象?
- ruby-on-rails - 如何在case语句Rails中使用记录ID
- rest - 如何将此特定的元数据减少参数放入 PowerQuery 中 OData 调用的标头中?
- java - 当对构造函数使用@Around 建议时,AspectJ weaver 给了我“应用于构造函数执行的不兼容的返回类型”
- python - 大师班中具有唯一属性的Python继承
- r - 在 R 中减去阶跃函数
- python - 如何在包含文本和 HTML 的 python 中使用 Multimime 发送邮件?
- android - 无法访问类“com.google.firebase.firestore.DocumentReference”
- javascript - 向 minDate 添加一天(使用 datapicker)