"TypeError: error loading dynamically imported module" during hydration
See original GitHub issueThanks for working on this project! Here’s the first result of trying it out.
Iles 0.3.2, Windows 10, Node 16.11.1. New project created with iles-create.
Provided following index page:
<template>
<hello-world client:load />
</template>
and following HelloWorld.vue:
<template>
<button @click="click">click me</button>
<div>counter is now {{ counter }}</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const counter = ref(0);
function click() {
counter.value++;
}
</script>
The button works but there are following console warnings:
Loading failed for the module with source “d:/my-project/src/components/HelloWorld.vue”.
Loading failed for the module with source “http://localhost:3000/@id/@islands/hydration”.
Loading failed for the module with source “http://localhost:3000/@id/@islands/hydration/vue”.
In case of client:idle
or client:visible
, the button doesn’t work and the warnings are:
Loading failed for the module with source “d:/my=project/src/components/HelloWorld.vue”.
Uncaught (in promise) TypeError: error loading dynamically imported module
component http://localhost:3000/
resolveAndHydrate http://localhost:3000/@id/@islands/hydration:9
hydrateWhenIdle http://localhost:3000/@id/@islands/hydration:14
All client:load
, client:idle
, and client:visible
break during npm run build
with the same error:
build error:
TypeError: Cannot read properties of undefined (reading 'imports')
at renderRoute (D:\my-project\node_modules\iles\dist\node\chunk-CGP66JQW.js:5250:17)
at D:\my-project\node_modules\iles\dist\node\chunk-CGP66JQW.js:5239:63
at Array.map (<anonymous>)
at bundleIslands (D:\my-project\node_modules\iles\dist\node\chunk-CGP66JQW.js:5239:36)
at async D:\my-project\node_modules\iles\dist\node\chunk-4VENJ5VU.js:31:92
at async withSpinner (D:\my-project\node_modules\iles\dist\node\chunk-U43AXZ2V.js:9:20)
at async build (D:\my-project\node_modules\iles\dist\node\chunk-4VENJ5VU.js:31:5)
Without the client prop everything builds but of course there’s no button handler.
Issue Analytics
- State:
- Created 2 years ago
- Comments:11 (5 by maintainers)
Top Results From Across the Web
"Failed to fetch dynamically imported module" when ... - GitHub
I have a deployment that results with the error: Failed to fetch dynamically imported module: https://esg.censible.co/client/index.ba12ed5c.
Read more >error loading dynamically imported module - You.com | The AI ...
Describe the Bug. Importing Firestore into a Svelte component throws a TypeError: error loading dynamically imported module error and breaks the component.
Read more >Vaadin 23 TypeError: error loading dynamically imported ...
In Firefox browser, not always (but very often) I see the following error in the console (and page is unable to load): TypeError:...
Read more >Advanced Features: Dynamic Import - Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
Read more >Lazy Loading / Code Splitting - Quasar Framework
We'll cover how you can lazy load / code split parts of your app so that they are automatically requested only on demand....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks, it’s working now!
So it’s not related with
\x00
. I’ll do a prerelease patch so that you can test it. Thanks for all of your help!