Help

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

Solved
Jump to Solution
2938 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Arvin_Xu
5 - Automation Enthusiast
5 - Automation Enthusiast

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?

1 Solution

Accepted Solutions
somehats
6 - Interface Innovator
6 - Interface Innovator

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.

See Solution in Thread

5 Replies 5
Billy_Littlefie
7 - App Architect
7 - App Architect

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.

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
5 - Automation Enthusiast
5 - Automation Enthusiast

@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
6 - Interface Innovator
6 - Interface Innovator

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
5 - Automation Enthusiast
5 - Automation Enthusiast

Thanks for your replying!