Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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?

Tags:

2

Answers


  1. 0

    I don’t know RSBuild much,
    but I think you can write a script that reads every file and make all paths relative…
    Sth like relativify.js and run it through node that looks for every file in your dist folder…

    Login or Signup to reply.
  2. 0

    This question should actually be translated as: How can I use rsbuild to publish a page on GitHub page and make it run properly?

    The fundamental reason for your description of 「unable to import required files」 is that the path did not match. The reason for all of this is that GitHub pages automatically add an additional secondary path based on the repository name.
    For example, if my Github name is GrinZero, then my domain name is https://grinzero.github.io. And my GitHub pages for each repository will start with this domain name and use the repository name as the secondary path.
    For example, I have two repositories using GitHub pages, namely node-network-devtools and magic-design-react. So the paths to accessing their GitHub pages are:

    Generally speaking, when we initialize a project, whether it’s Vite, Webpack, or RSpack, there are no secondary paths by default. That is to say, as long as we add the secondary path, the problem will be solved.

    So how to add it? In Vite, the base attribute can be used to modify it.And for rspack, according to the information I retrieved, it can be set through output.publicPath.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search