Using Atlaskit with Typescript

charlie · May 10, 2019, 1:34am

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:

github.com/vercel/next.js

8.0.0 - babel not compiling properly

opened 06:08PM - 12 Feb 19 UTC

closed 03:57PM - 05 Mar 19 UTC

dunika

I am getting the following issue which I presume is related to babel. ``` no…de_modules/@babel/runtime-corejs2/helpers/esm/asyncToGenerator.js:1 (function (exports, require, module, __filename, __dirname) { import _Promise from "../../core-js/promise"; SyntaxError: Unexpected token import ``` It seems that `@babel/runtime-corejs2/helpers/esm` is being used instead of just`@babel/runtime-corejs2/helpers` where the compiled files seem to be. I didn't notice this in `dev` with the following config ``` "presets": [ ["next/babel", {"preset-env": { "modules": "commonjs" }}] ], ``` The issue is when I try and run the production build. Here is the relevant config ``` { "env": { "production": { "presets": [ ["next/babel", { "preset-env": { "targets": { "browsers": ["> 1%"] } } }] ], "plugins": [ [ "babel-plugin-styled-components", { "displayName": false } ], "transform-react-constant-elements", "@babel/plugin-transform-react-inline-elements" ] }, }, "plugins": [ [ "transform-imports", { "lodash": { "transform": "lodash/${member}", "preventFullImport": true }, "validator": { "transform": "validator/lib/${member}", "preventFullImport": true }, "recompose": { "transform": "recompose/${member}", "preventFullImport": true }, } ], "date-fns", "transform-modern-regexp", "@babel/plugin-proposal-export-default-from", "@babel/plugin-proposal-export-namespace-from", "@babel/plugin-proposal-optional-catch-binding", [ "module-resolver", { "root": [ "./src" ] } ], [ "inline-import", { "extensions": [ ".css" ] } ] ] } ```

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.