Help

Upcoming database upgrades. Airtable functionality will be reduced for ~15 minutes at 06:00 UTC on Feb. 4 / 10:00 pm PT on Feb. 3. Learn more here

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

Topic Labels: Custom extensions
Solved
Jump to Solution
3513 5
cancel
Showing results for 
Search instead for 
Did you mean: 

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

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.

@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.

Thanks for your replying!