React SSR express,webpack,babel babel 不喜歡我的組件中的 CSS

Question

我一直在嘗試學習如何使用 React 進行 SSR（不使用 Next.js）我已經到了這樣的程度，即我看到頁面上呈現了 HTML 但是一旦我添加了 css 導入以設置組件 babel 的樣式開始拋出錯誤（C:\Users\Frozen\Desktop\ssr stuff\ssr4\src\App.css:1 body { ^

SyntaxError: 意外的標記 '{' )

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './build'),
    filename: "bundle.js",
    publicPath: "/"
  },
  devServer: {
    port: 3010,
    static: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', "@babel/preset-react"]
          }
        },
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    publicPath: "/"
  })
]

};

服務器.js

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './src/App.js';
import path from 'path';
import fs from 'fs';

const app = express();

app.get('/', (req, res) => {
  console.log('in /');
  fs.readFile(
    path.resolve('./build/index.html'),
    'utf8',
    (err, data) => {
      if (err) {
        console.log(err);
        return res.status(500).send('Internal Server Error');
      }
      const html = data.replace(
        '<div id="root"></div>',
        `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
      )
      console.log(html)
      return res.send(html);
    }
  );
});
app.use(express.static(path.resolve(__dirname,'build')));

app.listen(3000, () => {
  console.log('server listening on port 3000')
})

我也無法理解為什么我必須將 app.use(static) 放在 app.get('/') 不是中間件應該一個接一個 go 以便從上到下（如果我移動應用程序。在 app.get('/') 上方使用（靜態），我在其中返回我沒有看到的組件 console.log('in /');

index.js

import React from "react";
import ReactDOM from 'react-dom'
import App from "./App";

const appElement = document.getElementById('root');

ReactDOM.hydrate(<App/>, appElement)

I run npx webpack npx babel-node server.js And I get the css error (if I remove the css import I don't get it but I don't have css in the component) Also is there a way to rebuild and run server.js 一旦我改變了一些東西（比如當你使用 create-react-app 時）還有任何其他關於我可以在當前設置中改進的建議將不勝感激。

Answer 1

安裝babel-plugin-css-modules-transform
npm install --save-dev babel-plugin-css-modules-transform 。

然后將其包含在.babelrc
"plugins": ["css-modules-transform"]