Stencil: ESM Module References Unavailable File

[alexlafroscia]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
Trying to import a package using ESM through WebPack, I'm running into an issue.

In the dist after running stencil build the graph of files references a module that doesn't exist.

dist/esm/index.js imports ../collection/index.js
../collection/index.js import ./components
./components has no index.js file, and so the build is unable to complete.

Expected behavior:
I would expect that the components directory has an index.js inside it that itself imports the modules found within the components directory, and for the build not to break.

Steps to reproduce:

If you clone this repo (specifically checked out to the fix-stencil-compiler-update branch) and then run the following:

yarn install
cd packages/demo-components
yarn build

you should be able to see the same issue that I am.

[alexlafroscia]

I checked out a different version of @stencil/core (0.9.1) and am having the same problem...

[alexlafroscia]

0.10.6 (published just earlier today) also has this problem.

As far as I know, importing a directory without an index.js inside isn't supported... am I wrong about that? I can't find a reference for that being supported anywhere online.

[alexlafroscia]

Updated to the recent 0.10.9 release, this is still a problem.

[jthoms1]

@adamdbradley any thoughts on this? I have seen the same issue with the router.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[jthoms1]

@alexlafroscia Can you give 0.12.4 a try?

Here is the approach I have taken to fix the issue in stencil-router.

1. Set the following fields in your package.json.

  "module": "dist/esm/index.js",
  "main": "dist/index.js",
  "unpkg": "dist/stencilrouter.js",
  "types": "dist/types/index.d.ts",
  "collection": "dist/collection/collection-manifest.json"

1. Create the following file in src/index.ts.

// Important line to have to get around Typescript weirdness
export { Components } from './components';

// Any other exports of the project
export { default as injectHistory } from './global/injectHistory';

// My Type exports
export {
  ActiveRouter,
  Listener,
  LocationSegments,
  RouterHistory,
  MatchOptions,
  MatchResults
} from './global/interfaces';

[jthoms1]

I need to document this but if I can get you to try this and it works as you expected then I will add to our site this weekend.

[jthoms1]

Keeping this as a documentation issue. @alexlafroscia You mentioned on twitter that this did work. Is that correct?

[alexlafroscia]

Yes, I was able to consume an ESM build produces from @stencil/[email protected] without issue!

However, I am getting this warning now that I don't understand. Nothing about my components has changed, just the Stencil version:

[manucorporat]

T