javascript - 如何配置 Next.js 项目以使用 @Atlaskit 开源 React UI 库（编译时错误）？

Question

我正在使用带有 Atlaskit 的 Next.js 版本 8，但出现编译时错误，如下所示，我尝试了许多气泡插件和 web-pack 配置，但由于我是 web-pack 和气泡的新手，所以没有工作

/Users/UserName/Desktop/work-space/with-styled-components-app/node_modules/@atlaskit/theme/index.js:1
(function (exports, require, module, __filename, __dirname) { import { css } from 'styled-components';
                                                                     ^

SyntaxError: Unexpected token {
    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)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/Desktop/work-space/with-styled-components-app/node_modules/@atlaskit/icon/cjs/components/Icon.js:30:14)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

我的 package.json 有这些依赖项

"@atlaskit/avatar": "^15.0.1",
    "@atlaskit/css-reset": "latest",
    "@atlaskit/icon": "^16.0.5",
    "@atlaskit/logo": "^10.0.1",
    "@atlaskit/navigation-next": "5.0.1",
    "@atlaskit/theme": "^8.0.1",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "apollo-boost": "^0.3.1",
    "apollo-link-context": "^1.0.17",
    "babel-plugin-styled-components": "^1.10.0",
    "cookie": "^0.3.1",
    "graphql": "^14.1.1",
    "isomorphic-unfetch": "^3.0.0",
    "jest-styled-components": "^7.0.0-2",
    "next": "^8.0.3",
    "react": "^16.8.4",
    "react-apollo": "^2.5.2",
    "react-dom": "^16.8.4",
    "styled-components": "^4.0.0"

标签： javascriptreactjswebpacknext.jsatlaskit