Using Atlaskit with Typescript

I cannot find any tutorial about how use atlaskit with typescript, i have a simple boilerpate using typescript, react and nextjs and every time i try to import and use a atlaskit component i receive an error called unexpected export token, so i think the cause of this error is something on babel… This is the .babelrc that i use with my applications .

Anyone can give me some help about how use Atlaskit with typescript ?

I also have a public repository on github with my boilerpate https://github.com/NicholasKuchiniski/typescript.app/tree/master/app

any PR’s is welcome.

{
  "env": {
    "development": {
      "presets": ["next/babel", "@zeit/next-typescript/babel"]
    },
    "production": {
      "presets": ["next/babel", "@zeit/next-typescript/babel"]
    },
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }], "@zeit/next-typescript/babel"]
    }
  }
}
1 Like

Any luck on this? I too am running into issues using AtlasKit (specifically Editor Core) with Next.js and Typescript.

I made a separate repo that also replicates the issue: GitHub - brandontle/nextjs-with-atlaskit: Attempting to Use AtlasKit Editor with Next JS

We are using Atlaskit with Typescript without problems. Indeed I wouldn’t want to use it without Typescript!

@brandon I just tried that repo you posted, following the instructions in README.md and it’s working fine for me:

Perhaps it was a problem in Atlaskit which has since been fixed?

Hey @charlie, thanks for the reply.

I commented out the troubling code in ~src/components/Home.tsx. Can you try uncommenting the import and the Editor component like so:

import * as React from 'react';
import * as classnames from 'classnames';
import * as css from './Home.css';
// previously commented
import { Editor } from '@atlaskit/editor-core';

export const Home: React.FunctionComponent = props => (
  <div className={classnames('test', css.home)}>
    {/* previously commented */}
    <Editor />
  </div>
);

The editor should show up if everything compiles/builds successfully. But instead, I get a SyntaxError: Unexpected token export... error

OK, I tried that and I do get the same error:

nextjs-with-atlaskit/node_modules/@atlaskit/editor-core/index.js:2

export { name, version } from './version-wrapper';
^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:686:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:659:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.@atlaskit/editor-core (nextjs-with-atlaskit/.next/server/static/development/pages/index.js:1769:18)
    at __webpack_require__ (nextjs-with-atlaskit/.next/server/static/development/pages/index.js:23:31)
    at Module../src/components/Home.tsx (nextjs-with-atlaskit/.next/server/static/development/pages/index.js:1532:79)
    at __webpack_require__ (nextjs-with-atlaskit/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.tsx (nextjs-with-atlaskit/.next/server/static/development/pages/index.js:1407:78)
    at __webpack_require__ (nextjs-with-atlaskit/.next/server/static/development/pages/index.js:23:31)

I googled for that and it looks like a bug in Next.js:

I’m completely unfamiliar with Next.js so I can’t help you with that, but you could try follow the suggestions in that Github link.

Otherwise you could just use Create React App to create a simple app that doesn’t depend on Next.js… that is what we do, and both Typescript and the Atlassian Editor are working fine with Create React App.

Hi Guys,

Any update on this. I’ve been trying to figure out TS with Atlaskit too, seems difficult to make it work.

Hi Gil – are you still having problems using TS with Atlaskit? Towards the end of 2019 we completed an effort to convert our components to Typescript, so if there are any issues with using the repo we’d love to hear more details.