Hot Reload fails with dynamic imports containing top-level-await #14006

renekaesler · 2024-09-18T03:42:17Z

What version of Bun is running?

1.1.27+267afa293

What platform is your computer?

Linux 6.8.0-44-generic x86_64 x86_64

What steps can reproduce the bug?

The bun --hot functionality does not seem to work correctly when dynamically importing a module which contains a top-level await.

livereload.js

const server = Bun.serve({
  async fetch(req, server) {
    const url = new URL(req.url);

    if (url.pathname === "/livereload") {
      if (server.upgrade(req)) return;
    }

    const template = await import("./template.js");

    return new Response(template.default, {
      headers: { "Content-Type": "text/html" },
    });
  },
  websocket: {
    open(ws) {
      ws.subscribe("livereload");
    },
    close(ws) {
      ws.unsubscribe("livereload");
    },
  },
});

server.publish("livereload", "reload");

template.js

const message = await new Promise(resolve =>
  setTimeout(resolve, 1000, "Bun LiveReload!")
);

export default `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>LiveReload</title>

      <script>
        const socket = new WebSocket("ws://localhost:3000/livereload");

        socket.addEventListener("message", event => {
          location.reload();
        });
      </script>
    </head>

    <body>
      <h1>${message}</h1>
    </body>
  </html>
`;

Steps to Reproduce:

Start the Server: bun --hot livereload.js
Open localhost:3000 in your Browser
Modify the "Bun LiveReload!" string in template.js

What is the expected behavior?

The website should be reloaded according to the change.

What do you see instead?

The server throws an error:

ReferenceError: Cannot access 'default' before initialization.
      at /temp/livereload.js:12:25
GET - / failed
 7 |     }
 8 | 
 9 |     const template = await import("./template.js");
10 |     // await Bun.sleep(2000);
11 | 
12 |     return new Response(template.default, {

Additional information

When setting the setTimeout to 0ms, the hot reload works as expected.

const message = await new Promise(resolve =>
  setTimeout(resolve, 0, "Bun LiveReload!")
);

export default `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>LiveReload</title>

      <script>
        const socket = new WebSocket("ws://localhost:3000/livereload");

        socket.addEventListener("message", event => {
          location.reload();
        });
      </script>
    </head>

    <body>
      <h1>${message}</h1>
    </body>
  </html>
`;

When using Bun.sleep(2000) after the import, the hot reload works as expected.

const server = Bun.serve({
  async fetch(req, server) {
    const url = new URL(req.url);

    if (url.pathname === "/livereload") {
      if (server.upgrade(req)) return;
    }

    const template = await import("./template.js");
    await Bun.sleep(2000);

    return new Response(template.default, {
      headers: { "Content-Type": "text/html" },
    });
  },
  websocket: {
    open(ws) {
      ws.subscribe("livereload");
    },
    close(ws) {
      ws.unsubscribe("livereload");
    },
  },
});

server.publish("livereload", "reload");

The text was updated successfully, but these errors were encountered:

renekaesler added bug Something isn't working needs triage labels Sep 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hot Reload fails with dynamic imports containing top-level-await #14006

Hot Reload fails with dynamic imports containing top-level-await #14006

renekaesler commented Sep 18, 2024 •

edited

Loading

Hot Reload fails with dynamic imports containing top-level-await #14006

Hot Reload fails with dynamic imports containing top-level-await #14006

Comments

renekaesler commented Sep 18, 2024 • edited Loading

What version of Bun is running?

What platform is your computer?

What steps can reproduce the bug?

What is the expected behavior?

What do you see instead?

Additional information

renekaesler commented Sep 18, 2024 •

edited

Loading