Bug with building SSR for reactjs-website - node.js

Question

I have some react-app and trying to enable server-side rendering.
I make the server/index.js and describe the server logic (using express)
import path from 'path';
import fs from 'fs';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';
import App from 'src/App';
const PORT = process.env.PORT || 3006;
const app = express();
app.get('/', (req, res) => {
const app = ReactDOMServer.renderToString(<App />);
const indexFile = path.resolve('./build/index.html'); <-- it's result of `npm run build`
fs.readFile(indexFile, 'utf8', (err, data) => {
if (err) {
console.error('Something went wrong:', err);
return res.status(500).send('Oops, better luck next time!');
}
return res.send(
data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
);
});
});
app.use(express.static('./build'));
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
Then I use webpack for convert jsx to js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './server/index.js',
target: 'node',
externals: [nodeExternals()],
devtool: false,
output: {
path: path.resolve('build'),
filename: 'server.js',
asyncChunks: true,
clean: true
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'babel-loader',
options: { presets: ['solid'] },
},
{
loader: 'ts-loader',
options: {
compilerOptions: { noEmit: false },
}
}],
exclude: /node_modules/,
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader, // Creates `style` nodes from JS strings
"css-loader", // Translates CSS into CommonJS
"sass-loader", // Compiles Sass to CSS
],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.js$/,
use: 'babel-loader'
}
]
},
plugins: [
new MiniCssExtractPlugin()
],
resolve: {
roots: [
'node_modules'
],
alias: {
src: path.resolve(__dirname, 'src')
},
extensions: ['.tsx', '.ts', '.js'],
},
};
Then I try to start server node build/server.js but got some error
/* harmony import */ var solid_js_web__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! solid-js/web */ "./node_modules/solid-js/web/dist/server.js");
...
const _tmpl$ = /*#__PURE__*/(0,solid_js_web__WEBPACK_IMPORTED_MODULE_0__.template)(`<li></li>`, 2),
TypeError: (0 , solid_js_web__WEBPACK_IMPORTED_MODULE_0__.template) is not a function
I can't understand how it happened and what's wrong? How can I make it work?

Answer 1

It was my mistake in webpack config
{
loader: 'babel-loader',
options: {
presets: ['#babel/env', '#babel/preset-react'], <-- correct
// presets: ['solid'], <-- incorrect
},
},