Bundle Error: ‘import’ and ‘export’ may appear only with ‘sourceType: module’

[Arvin_Xu]

I just post another topic,but nobody replies to me. Can anyone help me?

---

Hi, I’m using block sdk to build a custom app. But I meet an error after I install an es6 modules( @antv/x6 )

Bundle Error: 'import' and 'export' may appear only with 'sourceType: module'

I tried to add a .babelrc file to add prset-env but don’t work. what should i do to solve this problem?

[Billy_Littlefie]

Hi @Arvin_Xu,

The issue here is that @antv/x6 is published as an ES module, and the Blocks CLI currently only supports commonjs node dependencies. This is a known limitation which we’re working on improving.

In the meantime, you should be able to work around this if you can access a commonjs-compatible version of the bundle. Looking briefly, it appears ant also builds a UMD formatted bundle at dist/x6.js which would work for the block. You could try deep referencing this in your import statement (import x6 from '@antv6/x6/dist/x6'), or loading it from unpkg (https://unpkg.com/@antv/x6@1.1.1/dist/x6.js) directly.

[Arvin_Xu]

Thanks. It’s a relative solution. But when I use the umd version, I will lose the type defination. It will be panic to use this.
When will the block sdk solve this kind of problem?
It blocks me long time and sucks really.

[Arvin_Xu]

@Billy_Littlefield Is there any update of this problem?

And I have checked the antv/x6 module has a es5 version in the /lib directory. And I try to import this modules use code below

import { Graph } from '@antv/x6/lib';

but failed again

[somehats · Accepted solution]

Hey Arvin!

This is something we’re looking into, but unfortunately we don’t have any sort of timeline yet for when the issue might be resolved.

As a workaround to use the UMD version and still get type definitions, you could try using an extra .d.ts file to point the UMD module to the proper types like this:

// antv-x6.d.ts
declare module "@antv/x6/dist/x6" {
    export * from "@antv/x6";
}

With this, typescript should treat imports from @antv/x6/dist/x6 the same as imports directly from @antv/x6 when it comes to types.

[Arvin_Xu]

Thanks for your replying!