I try to migrate an existing project in js using express and ejs to render templates. I used react and react-dom. But the issues are that hooks and onChange don’t work. I’m going to share the client and server code that I added to initilize the migration
This is client/index.js
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import App from './App';
hydrateRoot(document.getElementById('root'), <App />);
This is server side
react_static_path = path.join(__dirname, 'client/dist/static')
app.use('/static', express.static(react_static_path));
//
module.exports = function(req, res){
const app_rendered = ReactDOM.renderToString(
React.createElement(App,
{
location: req.url,
context: {}
})
);
fs.readFile(path.resolve('client/index.html'), 'utf8', (err, html) => {
if (err) {
return res.status(500).send('Error');
}
let html_replaced = html.replace('{container}', `${app_rendered}`);
res.send(html_replaced)
})
}
This is the html that read before give the response
<!DOCTYPE html>
<style>
.a{
background-color:#29165a;
}
.x-navigation li.active > a{background:#00BFB3 !important;}
.x-navigation li > ul li.active > a{background:#00988e !important;}
</style>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap/bootstrap.min.js"></script>
<script type='text/javascript' src='/js/plugins/icheck/icheck.min.js'></script>
<script type="text/javascript" src="/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="/js/actions.js"></script>
<script type='text/javascript' src='/js/plugins/jquery-validation/jquery.validate.js'></script>
<script type='text/css' src='/js/clock-picker/bootstrap-clockpicker.min.js'></script>
<script type="text/javascript" src="/js/validation.js"></script>
<link rel="icon" href="/web_images/favicons/FLETY_ICONOADMIN.png" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/css/theme-default.css" />
<link rel="stylesheet" type="text/css" href="/css/map.css" />
<link rel="stylesheet" type="text/css" href="/css/bs4-spacing.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<style>
#cover-spin {
position:fixed;
width:100%;
left:0;right:0;top:0;bottom:0;
background-color: rgba(0,0,0,0.2);
z-index:9999;
display:none;
}
@-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#cover-spin::after {
content:'';
display:block;
position:absolute;
left:50%;top:50%;
width:40px;height:40px;
border-style:solid;
border-color:#29165a;
border-top-color:transparent;
border-width: 4px;
border-radius:50%;
-webkit-animation: spin .8s linear infinite;
animation: spin .8s linear infinite;
}
.x-navigation button,a{
word-break: break-all;
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis;
}
.x-navigation a{
padding-right: 1rem!important;
}
.x-navigation button:hover,.x-navigation a:hover{
overflow: visible;
white-space: normal;
height:auto; /* just added this line */
padding-right: 1rem!important;
}
.x-navigation-minimized a{
overflow: unset !important;
}
.hide_long_text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<title>title</title>
</head>
<body>
<div class="page-container">
<div id="root">
</div>
</div>
<script src="/static/bundle.js"></script>
</body>
</html>
I hope that can help me with this
I tried to using another hydrate template like createRoot from react-dom/client, but didn’t work
Jorge Contreras is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.