I am trying SSR with my React+Node application for SEO but getting this error. I guess it is looking for document keyword which doesn't exist in Node, which is why it is giving this error. I've looked up google but not able to find any solution.
var elem = document.createElement('div');
^
ReferenceError: document is not defined
at Object.<anonymous> (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:7661:12)
at __webpack_require__ (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:36:30)
at Object.<anonymous> (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:1030:1)
at __webpack_require__ (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:36:30)
at Object.<anonymous> (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:5655:14)
at __webpack_require__ (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:36:30)
at Object.<anonymous> (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:10045:13)
at __webpack_require__ (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:36:30)
at Object.<anonymous> (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:11557:18)
at __webpack_require__ (E:\IRS-Ecommerce\Ecommerce\IRS-Ecommerce\IRS-Ecommerce\node_modules\quill\dist\quill.js:36:30)
Babel file:
require("ignore-styles");
require("@babel/register")({
ignore: [/(node_module)/],
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-proposal-class-properties"],
});
require("./server");
Server.js
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const path = require("path");
const busboy = require("connect-busboy");
const busboyBodyParser = require("busboy-body-parser");
const fs = require("fs");
const React = require("react");
const ReactDOMServer = require("react-dom/server");
const App = require("./IRS-Ecommerce/src/App");
const html = ReactDOMServer.renderToString(<App />);
const app = express();
app.use("^/$", (req, res, next) => {
fs.readFile(
path.resolve("./IRS-Ecommerce/build/index.html"),
"utf-8",
(err, data) => {
if (err) {
console.log(err);
return res.status(404).send("Internal Server Error");
} else {
return res.send(
data.replace(`<div id="root"></div>`, `<div id="root">${html}</div>`)
);
}
}
);
});
app.use(express.static(path.resolve(__dirname, "IRS-Ecommerce", "build")));
It is my first time trying SSR. Can someone help me out here?
EDIT : I guess it is ignoring Server side node modules but not React node modules. I don't exactly know but maybe that's the issue. If it is, how can I solve it?