How to Resolve Export Format Conflicts Between ReScript and React Router v7 for Hot Module Replacement?

The most basic client-side React Router approach that can be executed normally.

let default = () => {
  <strong> {"hi"->React.string} </strong> 
}

import * as JsxRuntime from "react/jsx-runtime";

function $$default() {
  return JsxRuntime.jsx("strong", {
    children: "hi"
  });
}

export {
  $$default as default,
}

However, when using server-side SSR loaders, it fails to execute properly.

type t = {
  text: string
}
type componentProps = {
  loaderData: t
}
let loader = () => Promise.resolve({
  text: "about"
})

let default = (props: componentProps) => {
  let {loaderData} = props
  <strong> {loaderData.text->React.string} </strong> 
}

import * as JsxRuntime from "react/jsx-runtime";

function loader() {
  return Promise.resolve({
    text: "about"
  });
}

function $$default(props) {
  return JsxRuntime.jsx("strong", {
    children: props.loaderData.text
  });
}

export {
  loader,
  $$default as default,
}

But when I add that export default inside it, it can execute normally.

type t = {
  text: string
}
type componentProps = {
  loaderData: t
}
let loader = () => Promise.resolve({
  text: "about"
})

let make = (props: componentProps) => {
  let {loaderData} = props
  <strong> {loaderData.text->React.string} </strong> 
}

%%raw(`export default make`) 

import * as JsxRuntime from "react/jsx-runtime";

function loader() {
  return Promise.resolve({
    text: "about"
  });
}

function make(props) {
  return JsxRuntime.jsx("strong", {
    children: props.loaderData.text
  });
}

export default make
;

export {
  loader,
  make,
}

So now I want to ask if there are better methods to replace %%raw('export default make') in order to achieve export default.