如何配置Next.js项目以使用@Atlaskit开源React UI库(编译时错误)?

时间:2019-03-17 02:28:28

标签: javascript reactjs webpack next.js atlaskit

我正在将Next.js版本8与Atlaskit一起使用,但是遇到了编译时错误,如下所示,我尝试了许多Bubble插件和Web Pack的配置,但是由于我是Web Pack和Bubble的新手而无法使用< / p>

/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"

0 个答案:

没有答案