Nextjs 引入 antd 失败，报错

Question

Nextjs 引入 antd 失败，报错！

报错信息

{ /Users/jinyu/Workspace/Next-Bi/node_modules/antd/lib/style/index.css:15
@font-face {
^

SyntaxError: Invalid or unexpected token

at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:670:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/Users/jinyu/Workspace/Next-Bi/node_modules/antd/lib/breadcrumb/style/css.js:3:1)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3) sourceMapsApplied: true }

我的引入方式：

.babelrc 文件
{

"presets": [
    "next/babel"
],
"plugins": [
    "transform-decorators-legacy", [
        "import",
        {
            "libraryName": "antd",
            "style": "css"
        }
    ]

]

}

next.config.js 文件

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Answer 1

Problem description:

When CSS and other files are import in node_modules, compilation will throw error

Problem analysis:

The root cause is node environment when SSR rendering, node cannot process these types of files

Problem solving:

This package can ignore CSS and other files when multi-threaded packaging
https://github.com/xiaoxiaojx...
If there are font files, PR can be raised