React express server rendering css @ import reports an error

the project can be started normally using webpack"s devServer. After configuring ssr, css @ import reported an error

express configuration

import "@babel/polyfill"
import React from "react";
import {renderToString} from "react-dom/server";
import Home from "./src/component/Home";
import path from "path";
import express from "express";

const ROOT_PATH = path.resolve(__dirname);
const BUILD_PATH = path.resolve(ROOT_PATH, "build");
const app = express();

app.use(express.static(BUILD_PATH));
app.use("*", function (req, res) {
    res.write("<!DOCTYPE html><html><head><title>Hello HomePage</title><link href="/static/css/bundle.css" rel="stylesheet"></head><body>");
    res.write("<div id="app">");
    res.write(renderToString(<Home />));
    res.write("</div></body>");
    res.write("<script type="text/javascript" src="/static/js/bundle.js"></script>");
    res.write("</html>");
});

const server = app.listen(3000, () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log("server is start at", host, port);
});
/*

Global css

@import "./iconfont.css";
@import "./color.css";
@import "./font.css";
@import "./margin.css";
@import "./size.css";
@import "./algin.css";
@import "./float.css";
@import "./display.css";

-sharproot {
    width: 100% !important;
    height: 100% !important;
}

start with babel-node. / express.js and report an error

(function (exports, require, module, __filename, __dirname) { @import "./iconfont.css";
                                                              ^
SyntaxError: Invalid or unexpected token
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    
    ......
< hr >

if you don"t ssr, but just start the project with express, it"s no problem

import path from "path";
import express from "express";

const ROOT_PATH = path.resolve(__dirname);
const BUILD_PATH = path.resolve(ROOT_PATH, "build");
const app = express();

app.use(express.static(BUILD_PATH));
app.use("*", function (req, res) {
    return res.sendFile(BUILD_PATH + "/index.html");
});

const server = app.listen(3000, () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log("server is start at", host, port);
});

normal startup

< hr >

if you need to see any more code, you can reply to me

Apr.30,2022

what is the css configuration for server rendering, and when server rendering starts, don't you first package the front-end code to generate a html with content, then start the service, the user accesses it, and the backend directly returns this html with content? The logic of your express configuration is correct, but the error message seems to have not been packaged front-end code, css is still modularized into

Menu