Error: export 'defineCustomElements' (imported as 'defineCustomElements') was not found

Stencil
1

stencil/core: 2.13.0
angular/core: 15.0.0
ionic/angular: 6.1.9

I have build some custom components with stencil and added them to my ionic angular app. They were working yesterday but today I updated them a little and I get an error when building the ionic app.

My workflow is as follows:

In stencil:

  • Change the version number in the package.json
  • npm run build to build it
  • Run npm link in the root of the stencil folder to link the stencil package to the local installation of npm
  • Check the package is linked with npm ls -g --depth=0 --link=true
  • Run npm link xxx in the root of the ionic folder to install the package ‘xxx’ to the ionic app.
  • In main.ts:
    – Add import { defineCustomElements } from '../node_modules/xxx/loader/'; at the top
    – Add defineCustomElements(window); at the bottom

So main.ts in the ionic app looks like this:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from '../node_modules/xxx/loader/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));



defineCustomElements(window);

If I follow the import { defineCustomElements } from '../node_modules/xxx/loader/'; with F12 in VSCode it does take me to the index.d.ts file with the export:

export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;

When I run ionic build --prod or ionic build I get the following error and I can see the library package in the node_modules folder:

./src/main.ts:10:0-20 - Error: export 'defineCustomElements' (imported as 'defineCustomElements') was not found in '../node_modules/xxx/loader/' (module has no exports)

It built without error before.

I can’t find anything on Google. Any ideas please?

Update: Interestingly if I build with --verbose it builds without error???

Thanks.

1 Like
2

stencil/core: 3.0.0
angular/core: 15.2.0

I have the same problem as mentioned. I followed the integration guide found in the Stencil documentation (Angular Integration with Stencil | Stencil). I build the stencil library, but when I run the angular project (ng serve) I get the error:

./dist/component-library/fesm2020/component-library.mjs:1015:13-33 - Error: export 'defineCustomElements' (imported as 'defineCustomElements') was not found in 
'stencil-library/loader' (module has no exports)

My component-library.module.ts file looks like this:

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { defineCustomElements } from 'stencil-library/loader';

import { DIRECTIVES } from './stencil-generated';

@NgModule({
  declarations: [...DIRECTIVES],
  exports: [...DIRECTIVES],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        return defineCustomElements();
      },
    },
  ]
})
export class ComponentLibraryModule { }

I really do not know what happens, any ideas to solve this error?

Thanks.

3

I didn’t manage to fix is as such, but I did find that it would compile with the --verbose parameter. Maybe worth a try. I’ve just been using that as I assume it’s a bug in the build process or something.

4

fwiw make sure the import “stencil-library” matches your actual stencil project