I am using Next.js version 8 with Atlaskit but getting compile time error which you see as below, I tried many bubble plugin and web-pack configs but didn't work as I am new to web-pack and bubble
/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)
and my package.json has these dependencies
"@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"