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"]
    }
  }
}

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: https://github.com/brandontle/nextjs-with-atlaskit

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.