javascriptrspackrsbuild

How do I force rspack / rsbuild to use relative paths?

I created a new React app using rspack, based on the docs I used the command npm create rsbuild@latest.

I deployed the build to Github pages, unfortunately the page is empty. It seems it's not able to import the required files

enter image description here

I had a look at the generated .html code

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script defer src="/static/js/lib-react.66d7bffd.js"></script><script defer src="/static/js/234.7da32f54.js"></script><script defer src="/static/js/index.0006388e.js"></script>
      <link href="/static/css/index.ff669eb5.css" rel="stylesheet">
   </head>
   <body>
      <div id="root"></div>
   </body>
</html>

and I think the paths should be relative. When I prepend . to each path, everything works as expected.

How do I force rspack / rsbuild to use relative paths?

Solution

  • Try this:

    // rsbuild.config.ts
import { pluginReact } from '@rsbuild/plugin-react';

 export default defineConfig({
   plugins: [pluginReact()],
+  output: {
+     assetPrefix: './'
+  }
 });