bug: Uncaught TypeError: Failed to construct 'URL': Invalid base URL

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

The following message shows on the browser console whenever I render the component that contains IonRefresherContent.

Uncaught TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:2680)
    at getNamedUrl (icon.js:46)
    at getUrl (icon.js:27)
    at HTMLElement.loadIcon (icon.js:255)
    at icon.js:227
    at HTMLElement.waitUntilVisible (icon.js:250)
    at HTMLElement.connectedCallback (icon.js:225)
    at HTMLElement.connectedCallback (index.js:2280)
    at addVnodes (index.js:803)
    at patch (index.js:991)
    at renderVdom (index.js:1187)
    at callRender (index.js:1449)
    at updateComponent (index.js:1371)
    at index.js:1352
    at then (index.js:1582)
    at dispatchHooks (index.js:1352)
    at Array.dispatch (index.js:1320)
    at consume (index.js:2954)
    at flush (index.js:3009)

Expected Behavior

Render IonRefresherContent without error messages.

Steps to Reproduce

1. Use the following combo anywhere.

<IonRefresher slot="fixed">
  <IonRefresherContent />
</IonRefresher>

1. The error message is displayed on the browser console.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.18.1 (/Users/ken.zhang/.nvm/versions/node/v13.10.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.0.1

Capacitor:

   Capacitor CLI      : 3.0.0
   @capacitor/android : not installed
   @capacitor/core    : 3.0.0
   @capacitor/ios     : not installed

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : 1.5.0

System:

   NodeJS : v13.10.1 (/Users/ken.zhang/.nvm/versions/node/v13.10.1/bin/node)
   npm    : 7.14.0
   OS     : macOS Big Sur

Additional Information

dependencies in package.json

"@capacitor/app": "1.0.0",
"@capacitor/camera": "1.0.0",
"@capacitor/core": "3.0.0",
"@capacitor/filesystem": "1.0.0",
"@capacitor/haptics": "1.0.0",
"@capacitor/keyboard": "1.0.0",
"@capacitor/storage": "1.0.0",
"@ionic-native/camera": "5.36.0",
"@ionic-native/clipboard": "5.36.0",
"@ionic-native/core": "5.36.0",
"@ionic-native/firebase": "5.36.0",
"@ionic/pwa-elements": "3.1.1",
"@ionic/react": "6.0.1",
"@ionic/react-router": "6.0.1",
"@react-google-maps/api": "2.2.0",
"@reduxjs/toolkit": "1.5.1",
"@testing-library/jest-dom": "5.11.9",
"@testing-library/react": "11.2.5",
"@testing-library/user-event": "12.6.3",
"@types/deep-equal": "1.0.1",
"@types/jest": "26.0.20",
"@types/node": "12.19.15",
"@types/prettier": "2.2.3",
"@types/react": "16.14.3",
"@types/react-dom": "16.9.10",
"@types/react-geocode": "0.2.0",
"@types/react-redux": "7.1.16",
"@types/react-router": "5.1.11",
"@types/react-router-dom": "5.1.7",
"@types/styled-components": "5.1.9",
"@types/uuid": "8.3.3",
"connected-react-router": "6.9.1",
"cordova-clipboard": "1.3.0",
"cordova-plugin-camera": "5.0.2",
"cordova-plugin-firebase": "2.0.5",
"d3": "7.0.0",
"deep-equal": "1.1.1",
"env-cmd": "10.1.0",
"eslint": "7.26.0",
"fake-indexeddb": "3.1.7",
"firebase": "9.5.0",
"formik": "2.2.9",
"generate-avatar": "1.4.10",
"hash-wasm": "4.9.0",
"history": "4.0.0",
"husky": "6.0.0",
"ionicons": "5.4.0",
"lint-staged": "11.0.0",
"prettier": "2.3.0",
"promise-all-settled-polyfill": "0.1.2",
"query-string": "7.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-error-boundary": "3.1.3",
"react-geocode": "0.2.3",
"react-image-lightbox": "5.1.4",
"react-redux": "7.2.4",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"redux": "4.1.0",
"styled-components": "5.3.0",
"typescript": "4.4.4",
"uuid": "8.3.2",
"web-vitals": "0.2.4",
"workbox-background-sync": "5.1.4",
"workbox-broadcast-update": "5.1.4",
"workbox-cacheable-response": "5.1.4",
"workbox-core": "5.1.4",
"workbox-expiration": "5.1.4",
"workbox-google-analytics": "5.1.4",
"workbox-navigation-preload": "5.1.4",
"workbox-precaching": "5.1.4",
"workbox-range-requests": "5.1.4",
"workbox-routing": "5.1.4",
"workbox-strategies": "5.1.4",
"workbox-streams": "5.1.4"

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/24525, and a fix will be available in an upcoming release of Ionic Framework.

[liamdebeasi]

This line looks to be the culprit: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/refresher-content/refresher-content.tsx#L54

With lazy loaded components, the base URL you are seeing is set by Stencil automatically. When using non-lazy loaded components, the base URL is not set, leading to this error.

I will get this prioritized with the team and post here when I more to share. Thanks!