Stencil: Can't import the named export 'a' from non EcmaScript module

[jdnichollsc]

Stencil version:

@stencil/[email protected]

I'm submitting a:

• [x] bug report

Current behavior:
Works from Angular and React, but I have the following warning building from Vue.js:

 error  in ../dist/esm-es5/loader.mjs

Can't import the named export 'a' from non EcmaScript module (only default export is available)

 error  in ../dist/esm-es5/loader.mjs

Can't import the named export 'b' from non EcmaScript module (only default export is available)

Expected behavior:
Be able to use the web component from Vue.js too :)

Steps to reproduce:

• Download the repo and run demo-vue project: https://github.com/proyecto26/ion-phaser

Other information:
This is the current configuration: https://github.com/proyecto26/ion-phaser/blob/master/package.json#L18

Thanks in advance!

[CookieCookson]

Same problem here!

[piemasters]

@jdnichollsc @CookieCookson have either of you had it running before with a previous version of stencil? I'm getting the same error in 1.3.3

[jdnichollsc]

Ok, it was fixed in my case by using namedExports as you can see here https://github.com/proyecto26/ion-phaser/blob/master/stencil.config.ts#L6
But I have other problem with the size of the bundle https://github.com/proyecto26/ion-phaser/issues/7

[piemasters]

hmm I don't import anything in any of my components other than @stencil/core, I only have devDependencies so there's nothing really to add into namedExports.

[piemasters]

I managed to solve this issue by upgrading webpack from 4.29.6 to 4.41.2. I think there was some sort of support issue for .mjs files in the older version.

[CookieCookson]

I can confirm this works for me too with a higher webpack version, thanks @piemasters

[TerryMooreII]

I had this issue also with Vue and webpack 4.41.2 when using either lerna or npm link-ing the components. The fix for me was to add chainWebpack: config => config.resolve.symlinks(false), to the vue.config.js file

[Reeska]

I had this issue also with Vue and webpack 4.41.2 when using either lerna or npm link-ing the components. The fix for me was to add chainWebpack: config => config.resolve.symlinks(false), to the vue.config.js file

This answer works for me too with Vue 2.6.11 which uses Webpack 4.43 (at the moment). I have generated the app with Vue CLI and I had to create the file vue.config.js on app root:

module.exports = {
  chainWebpack: config => config.resolve.symlinks(false)
}

[PsySolix]

I had this issue also with Vue and webpack 4.41.2 when using either lerna or npm link-ing the components. The fix for me was to add chainWebpack: config => config.resolve.symlinks(false), to the vue.config.js file

This answer works for me too with Vue 2.6.11 which uses Webpack 4.43 (at the moment). I have generated the app with Vue CLI and I had to create the file vue.config.js on app root:

module.exports = {
  chainWebpack: config => config.resolve.symlinks(false)
}

We also used a similar setup and encountered same issue, but for me above fix did not work.

The following syntax did work (as described in vue documentation)
chainWebpack: (config) => { config.resolve.symlinks(false); },

[spaceemotion]

I had the same issue for the past couple days and finally found the culprit after comparing every config line with the next.js with-stencil example.

Turns out: setting extras.dynamicImportShim to false breaks their import.

Had this happen on 1.16.x and 1.17.x so far.