[英]React SSR express,webpack,babel babel doesn't like the CSS in my components
我一直在尝试学习如何使用 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 时)还有任何其他关于我可以在当前设置中改进的建议将不胜感激。
安装babel-plugin-css-modules-transform
npm install --save-dev babel-plugin-css-modules-transform
。
然后将其包含在.babelrc
"plugins": ["css-modules-transform"]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.