Lazy and Dynamic import in react app build using bun not working correctly

[hedaukartik]

What version of Bun is running?

1.0.29

What platform is your computer?

Darwin 21.6.0 arm64 arm

What steps can reproduce the bug?

A lazy import in code like below (layout/home) is not resolved correctly in the output bundle -

import * as ReactDOM from "react-dom/client";
import { lazy } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
const Home = lazy(() => import("./layouts/home"));

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <ErrorPage />,
  }
]);

const rootDiv = document.getElementById("root") as HTMLElement;
const root = ReactDOM.createRoot(rootDiv);

root.render(<RouterProvider router={router} />);

Build javascript code -

Bun.build({
    entrypoints: [import.meta.dir + "/src/index.tsx"],
    outdir: BUILD_PATH,
    minify: true,
    splitting: true,
  });

What is the expected behavior?

In the built output file (/index.js) -

// Expected
V.lazy(() => import("./layouts/home/index.js")),

What do you see instead?

// Seen
V.lazy(() => import("layouts/home/index.js")),

Additional information

Is there any solution to fix this issue?

[hedaukartik]

@Electroid @Jarred-Sumner any idea what are we missing for above expected behavior?

[shpaw415]

quick fix Bun.build({ publicPath: "./" });

[hedaukartik]

Thanks @shpaw415 worked!

[shpaw415]

if you look for thanking me. could you please put a star on my repo.. https://github.com/shpaw415/bunext

[hedaukartik]

@shpaw415 You can also check my recent work on React CSR. I appreciate your feedback. Thanks.
https://github.com/hedaukartik/bun-react-csr-base