question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"TypeError: error loading dynamically imported module" during hydration

See original GitHub issue

Thanks 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:closed
  • Created 2 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
gustojscommented, Oct 20, 2021

Thanks, it’s working now!

✔ building islands bundle
  done in 501ms

build complete in 2.35s.
1reaction
ElMassimocommented, Oct 20, 2021

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found