[英]document is not defined, react ssr
I am using react and doing server-side rendering using node but when I run my server.js file, I get this error that the document is not defined.我正在使用 React 并使用节点进行服务器端渲染,但是当我运行我的 server.js 文件时,我收到此错误,指出未定义文档。 Here I know that in node document does not exist like on the browser, what should I do to solve this error?
在这里我知道在浏览器中不存在节点文档,我应该怎么做才能解决这个错误?
THIS IS MY WEBPACK.SERVER.JS FILE这是我的 WEBPACK.SERVER.JS 文件
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve('server-build'),
filename: '[name].js',
chunkFilename: '[id].[chunkhash].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpg|png|gif|woff|woff2|eot|ttf|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}
]
},
resolve: {
extensions: ['.js', '.jsx', '*']
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /node_modules/,
name: 'vendor',
chunks: 'initial',
enforce: true
}
}
}
}
} }
THIS IS THE ERROR I AM GETTING这是我遇到的错误
[nodemon] starting node./server-build/main.js
webpack://frontend/./node_modules/style-loader/dist/runtime/insertStyleElement.js?:5 [nodemon] 开始
node./server-build/main.js
webpack://frontend/./node_modules/style-loader/dist/runtime/insertStyleElement.js?:5
var element = document.createElement("style"); var element = document.createElement("style"); ^
^
ReferenceError: document is not defined at Object.insertStyleElement (webpack://frontend/./node_modules/style-loader/dist/runtime/insertStyleElement.js?:5:17) at Object.domAPI (webpack://frontend/./node_modules/style-loader/dist/runtime/styleDomAPI.js?:59:30) ReferenceError: document is not defined at Object.insertStyleElement (webpack://frontend/./node_modules/style-loader/dist/runtime/insertStyleElement.js?:5:17) 在 Object.domAPI (webpack://frontend/. /node_modules/style-loader/dist/runtime/styleDomAPI.js?:59:30)
at addElementStyle (webpack://frontend/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.在 addElementStyle (webpack://frontend/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.
You have 3 options:您有 3 个选择:
Move the code to the client, if you want to change the DOM elements.如果要更改 DOM 元素,请将代码移至客户端。 Because document relates to the DOM (Document Object Model) in a web browser.
因为文档涉及 web 浏览器中的 DOM(文档 Object 模型)。
Use something like browserify to include Node.js modules in your client-side code (not recommended in you case).使用像browserify这样的东西在你的客户端代码中包含 Node.js 模块(在你的情况下不推荐)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.