I have react-ssr project (webpack, express) with two react components. First one is app component which handles a lot of api calls and stuff. This is worker component the other one is just to list something.
While my first components imported css files bundles and correctly sent to client side. The other component's imported css file does not reach to client.
Here is my webpack.config.js first. As you can see I have app, business entry points. While app entry point bundles everything with imported css. Business does not.
const path = require("path");
const config = {
entry: {
vendor: ["@babel/polyfill", "react"],
app: "./src/components/index.js",
business: "./src/components/OneBusinessComponent/index.js"
},
output: {
path: path.resolve(__dirname, "public"),
filename: "[name].js",
publicPath: '/public'
},
module: {
rules: [
{
test: /\.js$|jsx/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader','css-loader'],
}
]
},
resolve: {
extensions: [".js", ".jsx", ".json", ".wasm", ".mjs", "*"]
}
};
module.exports = config;
Here is my routes which I serve these two components
import express from "express";
import App from '../components/app';
import OneBusiness from '../components/OneBusinessComponent/oneBusiness'
import React from 'react';
import { renderToString } from 'react-dom/server';
import hbs from 'handlebars';
import { Provider } from 'react-redux'
import store from '../redux/store'
import con from '../config/mysqlConfig'
import mysql from 'mysql';
con.connect(function (err) {
if (err) throw err;
console.log("Connected")
})
const router = express.Router();
router.get("/", async (req, res) => {
// <script src="/public/app.js" charset="utf-8"></script>
// <script src="/public/vendor.js" charset="utf-8"></script>
const theHtml = `
<html>
<head><title>Local Data</title></head>
<body>
<div id="reactele">{{{reactele}}}</div>
<script src="app.js" charset="utf-8"></script>
<script src="vendor.js" charset="utf-8"></script>
</body>
</html>
`;
const hbsTemplate = hbs.compile(theHtml)
const reactComp = renderToString(<Provider store={store}>
<App />
</Provider>)
const htmlToSend = hbsTemplate({ reactele: reactComp })
res.send(htmlToSend);
});
router.get("/biz/:name/:city/:state/:id", async (req, res) => {
console.log(req.params)
let query = "SELECT * FROM final_businesses WHERE id= " + req.params.id.toString()
console.log(query)
con.query(query, (err, data) => {
if (err) {
}
const theHtml = `
<html>
<head><title>My First SSR</title></head>
<body>
<div id="reactele">{{{reactele}}}</div>
<script src="business.js" charset="utf-8"></script>
<script src="vendor.js" charset="utf-8"></script>
</body>
</html>
`;
const hbsTemplate = hbs.compile(theHtml)
console.log(hbsTemplate)
const reactComp = renderToString(<OneBusiness params={data[0]}></OneBusiness>)
console.log(reactComp)
const htmlToSend = hbsTemplate({ reactele: reactComp })
res.send(htmlToSend);
})
});
export default router;
As I checked my business.js bundled file now it actually bundles css but may be because of routing it does not add css file as source to client side. Below is start of bundled business.js.
(()=>{"use strict";var e={3138:(e,t,n)=>{n.d(t,{Z:()=>a});
var r=n(3645),l=n.n(r)()((function(e){return e[1]}));l.push([e.id,'.info-label {\n
color:white;\n
font-family: "Segoe UI\', Tahoma, Geneva, Verdana, sans-serif";\n
width: 100%;\n
border:1px solid red;\n \n}\n.
info-key {\n
color:orange;\n
font-family: "Segoe UI\', Tahoma, Geneva, Verdana, sans-serif";\n}\n.
.nothing{\n
background-color: blue;\n
margin: 40px\n}\n.different {\n
width: 500px;\n
height: 500px;\n
background-color: aqua;\n \n}',""]);
This looks like I am accomplishing bundling. But my second route includes a lot of params. When I check google chrome source section. It shows my routes like file directories. I am using hbs template engine to embed my react component inside.
I am stuck with this for three days, any help will be appreciated.
