bug: Bundling Warning UNRESOLVED_IMPORT: `import @utils/overlays` in `@ionic/core/.../modal/gestures/utils.js`

[miqmago]

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.

Stencil Version

^2.17.3

Current Behavior

I've started a new stencil app with npm init stencil. I've installed dependencies, and when running npm start it shows a warning:

➜  test npm start

> test@0.0.1 start
> stencil build --dev --watch --serve

[42:32.5]  @stencil/core
[42:32.7]  v2.20.0 🍁
[42:36.6]  build, app, dev mode, started ...
[42:36.6]  transpile started ...
[42:42.2]  transpile finished in 5.64 s
[42:42.2]  copy started ...
[42:42.2]  generate lazy started ...
[42:43.0]  copy finished (1338 files) in 750 ms
[42:50.9]  generate lazy finished in 8.67 s

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

[42:50.9]  build finished, watching for changes... in 14.37 s

[42:50.9]  http://localhost:3334/

When using a modal it throws an exception:

import { modalController } from '@ionic/core';

    const modal = await modalController.create({
        component: 'modal-launcher',
        content: '<span>Hello</span>',
    });

TypeError: Failed to resolve module specifier "@utils/overlays". Relative references must start with either "/", "./", or "../".
Uncaught (in promise) Error: Constructor for "ion-modal#undefined" was not found
    at Be (index.js?app-data=conditional:2170:23)

Expected Behavior

No warning should appear. Modal should be able to instantiate and show.

System Info

package.json:

{
  "name": "test",
  "private": true,
  "version": "0.0.1",
  "description": "Stencil Ionic App Starter",
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate"
  },
  "devDependencies": {
    "@ionic/core": "^6.1.14",
    "@stencil/core": "^2.17.3",
    "@types/jest": "^27.5.2",
    "ionicons": "^6.0.2",
    "jest": "^27.5.1",
    "jest-cli": "^27.5.1",
    "puppeteer": "^16.2.0"
  },
  "license": "MIT"
}

```sh
➜  test npm ls create-stencil -g
/Users/user/.nvm/versions/node/v14.18.1/lib
└── create-stencil@3.1.1

### Steps to Reproduce

```sh
npm i create-stencil@latest
npm init stencil
cd test
npm i
npm start

Code Reproduction URL

https://stenciljs.com/docs/getting-started

Additional Information

It also fails when updating to "@ionic/core": "^6.3.9"

[miqmago]

In node_modules/@ionic/core/dist/collection/components/modal/gestures/utils.js

/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
- import { GESTURE } from '@utils/overlays';
+ import { GESTURE } from '../../../utils/overlays';
export const handleCanDismiss = async (el, animation) => {

Seems an issue with @ionic/core but it's really strange I haven't found any issue related to this in https://github.com/ionic-team/ionic-framework @sean-perkins

[sean-perkins]

@miqmago thanks for reporting this issue!

I have an open PR that will resolve this in Ionic Framework: https://github.com/ionic-team/ionic-framework/pull/26448

Here is a dev-build in the interim: 6.4.1-dev.11670531659.1bd9a8b7.

This issue stems from using Ionic Framework components (Stencil components) in another Stencil library/app. We occasionally have an alias import slip through, causing this issue. The team is aware and hoping to fix the root issue in Stencil in the future. If it happens again, please feel free to report an issue in Ionic Framework and we can take a look.

[rwaskiewicz]

This bug has been fixed in Ionic Framework v6.4.1, and as such I'm going to close this issue out. Should the bug re-appear, please feel free to open a new issue. Thanks!

[pranav-js]

i have nx repo setup with 2 stencil projects side by side. One is shared project.

i am importing it in primary with shared added as dependency of primary via package.json.

now inside the dist folder

my esm.js has entries like

import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './p-1e1c6d5d.js';
export { s as setNonce } from './p-1e1c6d5d.js';
import { g as globalScripts } from './p-bbf09086.js';
import './p-4441dfdd.js';
import '@myapp/elements-shared';    ----------> problem!
import './p-b035563c.js';

also while building get lot of warnings

Bundling Warning UNRESOLVED_IMPORT
           '@myapp/elements-shared' is imported by
           ./src/components/transfer-element/beneficiary-add/beneficiary-add.tsx,
           but could not be resolved – treating it as an external dependency

[rwaskiewicz]

@pranav-js can you do me a favor and please open a new issue with a minimal reproduction case? Thanks!

[pranav-js]

@rwaskiewicz I will try that, my current setup is pretty complex with nx setup of (integrated and packagebased repo). both of my stencil repo I migrated to package based setup. when linked via tsconfig paths it works fine, but not when linked via package.json entry points.