I am trying to use Server-side-rendering in create-react-application but i have been getting the following error. I have tried to update the babel version and change the type : 'commonjs' in package.json but is of no use.
This is the link i have been refering to implement ssr in my project link A hands-on guide for a Server-Side Rendering React app
Must use import to load ES Module:/Users/*path/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
require() of ES modules is not supported.
require() of /Users/*path/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js from /Users/Rajat/Desktop/ebullientech_ssr_example/ebullientech_io_reactjs/node_modules/react-spring/renderprops.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename objectWithoutPropertiesLoose.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/*path/node_modules/@babel/runtime/helpers/esm/package.json.
My server.js file is as follows
require("@babel/register")({
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
"@babel/plugin-proposal-class-properties",
[
"transform-assets",
{
extensions: ["css", "svg", "png"],
name: "static/media/[name].[hash:8].[ext]",
},
],
],
});
const React = require("react");
const ReactDOMServer = require("react-dom/server");
const App = require("../src/App").default;
const express = require("express");
const path = require("path");
const fs = require("fs");
const app = express();
app.get("/*", (req, res, next) => {
console.log(`Request URL = ${req.url}`);
if (req.url !== "/") {
return next();
}
const reactApp = ReactDOMServer.renderToString(React.createElement(App));
console.log(reactApp);
const indexFile = path.resolve("build/index.html");
fs.readFile(indexFile, "utf8", (err, data) => {
if (err) {
const errMsg = `There is an error: ${err}`;
console.error(errMsg);
return res.status(500).send(errMsg);
}
return res.send(
data.replace('<div id="root"></div>', `<div id="root">${reactApp}</div>`)
);
});
});
app.use(express.static(path.resolve(__dirname, "../build")));
app.listen(8080, () =>
console.log("Express server is running on localhost:8080")
);
My Package.json file is as follows:
{
"name": "",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/babel-types": "^7.0.9",
"axios": "^0.19.2",
"babel-plugin-transform-assets": "^1.0.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"bootstrap": "^4.4.1",
"concurrently": "^5.2.0",
"express": "^4.17.1",
"fontawesome": "^5.6.3",
"jquery": "^3.5.0",
"nodemon": "^2.0.6",
"package.json": "^2.0.1",
"popper": "^1.0.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-google-recaptcha": "^2.0.1",
"react-google-recaptcha-v3": "^1.5.1",
"react-helmet": "^6.0.0",
"react-owl-carousel": "^2.3.1",
"react-recaptcha-v3": "^1.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-router-sitemap": "^1.2.0",
"react-scripts": "^3.4.3",
"react-spring": "^8.0.27",
"react-visibility-sensor": "^5.1.1",
"reactstrap": "^8.4.1",
"styled-components": "^5.1.0",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sitemap": "babel-node ./src/Sitemap_files/sitemap.js",
"predeploy": "npm run sitemap",
"nodemon": "nodemon ./server/index.cjs"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/node": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.10",
"@babel/preset-react": "^7.12.10",
"@babel/register": "^7.12.10",
"babel-cli": "^6.26.0",
"babel-plugin-transform-assets": "^1.0.2",
"generate-robotstxt": "^8.0.3"
}
}
I get a different error if i try to serve the server.js without nodemon i.e:
/Users/*path/src/App.js:1
import React from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1054:16)
at Module._compile (internal/modules/cjs/loader.js:1102:27)
at Module._compile (/Users/Rajat/Desktop/ebullientech_ssr_example/ebullientech_io_reactjs/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Object.newLoader [as .js] (/Users/Rajat/Desktop/ebullientech_ssr_example/ebullientech_io_reactjs/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/Users/Rajat/Desktop/ebullientech_ssr_example/ebullientech_io_reactjs/server/index.cjs:16:13)
Any Help would be appreciated..Thankyou!
Solved it. Please do add the following plugin "@babel/plugin-proposal-class-properties" using npm or yarn and refer to it in the babel/register configuration settings. Like so:
require('@babel/register')({
ignore: [/(node_module)/],
presets: ['@babel/preset-env', '@babel/preset-react'],
"plugins": [
"@babel/plugin-proposal-class-properties",
{
"transform-assets",
{
"extensions": [
"css",
"svg"
],
"name": "static/media/[name].[hash:8].[ext]"
}
}
]
})