[Bug]: Blank page errors in production builds when converting from cra 4

[DevTGhosh]

Version

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 121.33 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Safari: 17.5
  npmPackages:
    @rsbuild/core: ^0.7.10 => 0.7.10
    @rsbuild/plugin-node-polyfill: ^0.7.10 => 0.7.10
    @rsbuild/plugin-react: ^0.7.10 => 0.7.10
    @rsbuild/plugin-sass: ^0.7.10 => 0.7.10
    @rsbuild/plugin-svgr: ^0.7.10 => 0.7.10

Details

After running the build command and opening any page directly that isn't the / page I am getting a blank page and a bunch of errors in the console. It is working fine on the dev server but the production build is causing an issue. The project is being converted from a cra 4 app to rsbuild. The issue seems to be accessing any protected route in react router v6 directly. Console errors.

lib-polyfill.5ddcd840.js:1 Uncaught SyntaxError: Unexpected token '<'
lib-react.ce3c5957.js:1 Uncaught SyntaxError: Unexpected token '<'
lib-lodash.06ae4d8e.js:1 Uncaught SyntaxError: Unexpected token '<'
lib-axios.1836f682.js:1 Uncaught SyntaxError: Unexpected token '<'
lib-router.9833324b.js:1 Uncaught SyntaxError: Unexpected token '<'
8419.350360a9.js:1 Uncaught SyntaxError: Unexpected token '<'
index.23e1808d.js:1 Uncaught SyntaxError: Unexpected token '<'
auto/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Reproduce link

don't have a reproducible link

Reproduce Steps

1. Convert a cra 4 application using react router v6 to rsbuild
2. Have some authenticated routes and try to access the routes directly through url.

[chenjiahan]

The JS assets are fallback to index.html and showed these errors, can you provide your rsbuild.config.ts?

Related documentation: https://rsbuild.dev/guide/basic/server#page-routing

[DevTGhosh]

import { defineConfig, loadEnv } from '@rsbuild/core'
import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill'
import { pluginReact } from '@rsbuild/plugin-react'
import { pluginSvgr } from '@rsbuild/plugin-svgr'
import { pluginSass } from '@rsbuild/plugin-sass'

const { publicVars } = loadEnv({ prefixes: ['REACT_APP_'] })
export default defineConfig({
    plugins: [
        pluginReact(),
        pluginSvgr({ mixedImport: true }),
        pluginNodePolyfill(),
        pluginSass(),
    ],
    html: {
        template: './public/index.html',
    },
    source: {
        define: publicVars,
    },
    output: {
        distPath: {
            root: 'build',
        },
        assetPrefix: 'auto',
    },
})

[eidellev]

I've also encountered this issue @DevTGhosh as a temporary solution you can override publicPath in rspack config:

tools: {
    rspack(config) {      
      config.output = {
        ...config.output,
        publicPath: '/'
      };
    }
  }

[DevTGhosh]

@eidellev that seems to have fixed the issue with the blank page, Thanks.

Still getting issues with favicons not loading. <%= assetPrefix %> seems to be resolving to auto. Any idea?

[eidellav]

@DevTGhosh favicon worked out of the box for me. what is the actual HTML for favicon that's being generated?

[xuchangjunjx]

@DevTGhosh favicon worked out of the box for me. what is the actual HTML for favicon that's being generated? You need add this config

output: {
assetPrefix: '/',
copy: [
{ from: './public/favicon.ico' },
],
},

[DevTGhosh]

There was an issue with my config. Fixing that solved the favicon issue. Thanks everyone for the help.

considering that the tools > rspack config can change anytime. A better solution should be there for the publicPath issue.

[xuchangjunjx]

你好，如果你看到我这封邮件，说明我已收到你的信息。若有问题我会抽空回复你。