Error report is introduced before next5.1 adds antd, to the project.

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"
Mar.02,2021

asked a group, saying that css cannot be loaded on demand, or whether it is introduced by putting it all in a static file.

Menu