ionic-framework: 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
- Use the following combo anywhere.
<IonRefresher slot="fixed">
<IonRefresherContent />
</IonRefresher>
- 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"
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 2
- Comments: 15 (3 by maintainers)
Commits related to this issue
- fix(refresher): import icons to avoid errors in react and vue (#24525) resolves #24480 — committed to ionic-team/ionic-framework by liamdebeasi 2 years ago
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.
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!
Getting the same issue in a similar configuration: