at present, it can be used normally if you don"t introduce something from antd, start the service directly, and then introduce antd.
but if antd, is introduced first and then the service is started, an error will be reported.
error message is as follows
(function (exports, require, module, __filename, __dirname) { import "../../style/index.less";
^^^^^^
SyntaxError: Unexpected token import
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (module.js:613:28)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Module.require (module.js:593:17)
at require (internal/module.js:11:18)
at Object.antd/es/rate/style (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/webpack:/external "antd/es/rate/style"?9c3b:1:1)
at __webpack_require__ (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/webpack:/webpack/bootstrap c8ec30cfbed027a9955b?3fd4:21:1)
at Object../pages/index.js (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/index.js:80:77)
at __webpack_require__ (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/webpack:/webpack/bootstrap c8ec30cfbed027a9955b?3fd4:21:1)
at Object.2 (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/index.js:222:18)
at __webpack_require__ (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/webpack:/webpack/bootstrap c8ec30cfbed027a9955b?3fd4:21:1)
the configuration of next.config is as follows
const withStylus = require("@zeit/next-stylus")
module.exports = withStylus({
webpack(config, options) {
config.module.rules.push(
{
test: /\.css$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader", options: { javascriptEnabled: true }
}]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
},{
loader: "less-loader", options: { javascriptEnabled: true }
}]
}
)
return config
}
})
babel is configured as follows
{
"presets": ["next/babel"],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
]
}
tried to determine that webpack"s isServer, didn"t work.
package version is as follows
"@zeit/next-stylus": "0.0.1",
"antd": "^3.4.1",
"css-loader": "^0.28.11",
"express": "^4.16.3",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"next": "^5.1.0",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"style-loader": "^0.20.3",
"stylus": "^0.54.5"