bug: Ionic custom import paths fail in Stencil web app

Steakeye commented 2 years ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

[ ] v4.x
[ ] v5.x
[X] v6.x

Current Behavior

I expect to be able to include ionic in my stencil web app but I have had to roll back ionic to version 6.0.14 instead of using the current latest 6.0.16 in order to not have the error throw.

When running stencil build he error thrown is:

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/logging' is imported by ./node_modules/@ionic/core/dist/collection/components/datetime/datetime.js,
           but could not be resolved – treating it as an external dependency

Expected Behavior

I should be able to use the latest version of @ionic/core with stencil as my UI library.

Using stencil version 2.13.0 alongside @ionic/core version 6.0.14, the steps to reproduce the bug work just fine, without error.

Steps to Reproduce

run npm init stencil and follow the steps to create your StencilJS project
cd into your new project folder and then npm i @ionic/core
add import @ionic/core to the global index.ts file
try to run npm run build

If you try to run Stencil with the --prerender flag in order to generate static files, the build fails entirely instead of just warning as it fails to resolve the @utils/logging dependency.

Code Reproduction URL

No response

Ionic Info

I'm not running an ionic project but this is the output from npx ionic info for my setup:

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.4.16

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.17.6
   npm    : 6.14.15
   OS     : Linux 5.13

Additional Information

I'm using stencil version 2.13.0 because later version of stencil fail to build for reasons relating to stencil typescript definitions.

sean-perkins commented 2 years ago

Hello @Steakeye thanks for reporting this issue!

Can you test in your application with this dev build and let me know if the problem is resolved?

6.0.17-dev.11649725371.11cd4764

Steakeye commented 2 years ago

Hi @sean-perkins,

Thanks for the quick response!

I can confirm that 6.0.17-dev.11649725371.11cd4764 works as expected!

sean-perkins commented 2 years ago

Awesome, thanks for the follow-up. I'll open a PR for that fix. We added an internal tech debt task to investigate why custom alias imports aren't working in external Stencil projects.

sean-perkins commented 2 years ago

This has been resolved with: https://github.com/ionic-team/ionic-framework/pull/25106 (forgot to mark it as resolved when I did the merge commit).

It will be available in the next release of Ionic.

Thanks!

mikaelkaron commented 2 years ago

So 6.1.0 fixed this issue, but introduced what looks to be the same problem in a bunch of other files:

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by ./node_modules/@ionic/core/dist/collection/components/header/header.js, but
           could not be resolved – treating it as an external dependency

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by ./node_modules/@ionic/core/dist/collection/components/footer/footer.js, but
           could not be resolved – treating it as an external dependency

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by
           ./node_modules/@ionic/core/dist/collection/components/infinite-scroll/infinite-scroll.js, but could not be
           resolved – treating it as an external dependency

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by
           ./node_modules/@ionic/core/dist/collection/components/refresher/refresher.js, but could not be resolved –
           treating it as an external dependency

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by
           ./node_modules/@ionic/core/dist/collection/components/reorder-group/reorder-group.js, but could not be
           resolved – treating it as an external dependency

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by ./node_modules/@ionic/core/dist/collection/utils/status-tap.js, but could
           not be resolved – treating it as an external dependency

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by ./node_modules/@ionic/core/dist/collection/utils/input-shims/input-shims.js,
           but could not be resolved – treating it as an external dependency

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by
           ./node_modules/@ionic/core/dist/collection/utils/input-shims/hacks/scroll-assist.js, but could not be
           resolved – treating it as an external dependency

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/content' is imported by
           ./node_modules/@ionic/core/dist/collection/utils/input-shims/hacks/scroll-padding.js, but could not be
           resolved – treating it as an external dependency

I'd submit a PR but it looks like you have other ideas on how to fix this according to

We added an internal tech debt task to investigate why custom alias imports aren't working in external Stencil projects.

ionitron-bot[bot] commented 2 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

ionic-team / ionic-framework