Background: Use react.js node to implement server-side rendering of react components.
Since the current node does not support import, I use thenodemon --harmony server.js --exec babel-node
command to execute, where server.js is the back-end entry file, which can support import. However, when I use antd's Button component, it reports that @import is not supported because antd's button component imports default.less. How can I solve this problem?
server.js
import React, { Component } from 'react'; import { renderToString } from 'react-dom/server' import { Button } from 'antd'; var Koa = require('koa'); var app = new Koa(); const render = require('koa-ejs'); const path = require('path'); render(app, { root: path.join(__dirname, 'server/view'), layout: 'template', viewExt: 'html', cache: false, debug: true }); app.use(async function (ctx, next){ const html = renderToString( ); await ctx.render('demo', {'html': html}); }); app.keys = ['i love yuewen']; app.listen(3000);
The error is reported as follows:
/Users/joy.hu/Sites/yue/node_modules/antd/lib/style/index.less:1 (function (exports, require, module, __filename, __dirname) { @import "./themes/default"; ^ SyntaxError: Invalid or unexpected token at createScript (vm.js:53:10) at Object.runInThisContext (vm.js:95:10) at Module._compile (module.js:543:28) at Module._extensions..js (module.js:580:10) at Object.require.extensions.(anonymous function) [as .js] (/Users/joy.hu/Sites/yue/node_modules/babel-register/lib/node.js:152:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at require (internal/module.js:20:19) at Object. (/Users/joy.hu/Sites/yue/node_modules/antd/lib/button/style/index.js:3:1) [nodemon] app crashed - waiting for file changes before starting...
https://babeljs.io/docs/usage...
https://github.com/babel/exam...