Can not import function-based widget which was build with cli-build-widget

[xiaohulu]

I create a function-based widget at "src/PageDesigner.ts"

import { v, create } from '@dojo/framework/core/vdom';

import * as css from './styles/PageDesigner.m.css';

const factory = create();

export default factory(function PageDesigner() {
    return v('h1', { classes: [css.root] }, ['Page Designer']);
});

and add it to .dojorc

{
    "build-widget": {
        "widgets": [
            "src/PageDesigner.ts"
        ]
    }
}

then run dojo build widget --mode dist --target lib

Then generate 3 files at output/dist

• PageDesigner.d.ts
• PageDesigner.mjs
• PageDesigner.mjs.map

But the dist file content is

PageDesigner.d.ts

declare const _default: import("@dojo/framework/core/interfaces").WNodeFactory<{
    properties: import("@dojo/framework/core/interfaces").WidgetProperties;
    children: import("@dojo/framework/core/interfaces").DNode<any>[];
}>;
export default _default;

Not export default PageDesigner So I can not import the PageDesigner widget.

The demo git repo is https://github.com/blocklang/page-designer.git

[agubler]

@xiaohulu It's an anonymous default export, so that's why it's been given the name _default.

If you change your code to name the function that is exported then in the types it will reflect that.

import { v, create } from '@dojo/framework/core/vdom';

import * as css from './styles/PageDesigner.m.css';

const factory = create();

const PageDesigner = factory(function PageDesigner() {
    return v('h1', { classes: [css.root] }, ['Page Designer']);
});

export default PageDesigner;

It shouldn't make a difference though as it is the default then it can be imported as any name? So once you have built the widget, packaged and installed it into the target project you should be able to import it:

import PageDesigner from 'the-package-name/PageDesigner';

To test this I converted the Button widget from @dojo/widgets and installed it into the widget-showcase from @dojo/examples and everything was working as expected (without having to change any code in the example).

[xiaohulu]

It's my fault. Thank you very much.