使用express服务端渲染，如果babel中配置了import会报错，删掉就可以正常启动。
但是这个配置，用webpack，不管是devServer，还是编译文件，都正常。只有在尝试用express启动的时候会包错
就是在.babelrc文件中的plugins的这段代码：
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
](function (exports, require, module, __filename, __dirname) { import '../../style/index.less';
^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
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)
...我的相关配置文件:
.babel
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime",
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
}server.js
require('ignore-styles');
var fs = require('fs');
var babelConfig = JSON.parse(fs.readFileSync('./.babelrc'));
require('@babel/register')(babelConfig);
require('./express.js');express.js
import path from 'path';
import fs from 'fs';
import express from 'express';
import React from 'react';
import {renderToString} from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';
import Home from './src/component/Home';
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) {
let context = {};
const template = renderToString(
<StaticRouter location={req.url} context={context}>
<Home/>
</StaticRouter>
);
if(context.status === 404) {
res.status(404);
}
fs.readFile(path.resolve(BUILD_PATH + '/index.html'), 'utf8', (err, data) => {
if (err) {
console.error(err);
return res.status(500).send('An error occurred');
}
return res.send(
data.replace('<div id="root"></div>', `<div id="root">${template}</div>`)
)
});
});
const server = app.listen(3000, () => {
const host = server.address().address;
const port = server.address().port;
console.log('server is start at', host, port);
});启动 node ./server.js
在Ant Design的Babel插件中，如果你在服务端渲染时遇到import报错，可能是因为你的Babel配置不正确。
例如，你可能在你的webpack配置中添加了以下import规则：
javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.jsx?$/,
use: [
'babel-loader',
{
loader: 'babel-plugin-import',
options: {
importLoaders: 2,
libraryTarget: 'commonjs',
preferJsX: true,
enforceDefine: false,
modules: false,
},
},
],
},
],
},
};
在这个配置中，我们使用了babel-plugin-import插件，它的配置如下：
javascript
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
},
],
},
],
},
};
这个配置会将所有的.jsx?文件转换为.js文件，然后再使用babel-loader进行处理。然而，由于.jsx?文件不能直接使用import语句，所以会导致报错。
如果你的Babel配置正确，那么你需要检查你的.jsx?文件是否能够直接使用import语句。如果你的.jsx?文件是ES6的，那么你需要确保你的.js文件也是ES6的。
如果你仍然无法解决这个问题，那么你可以尝试将.jsx?文件转换为.js文件，然后再使用babel-loader进行处理。
