javascripthtmlreactjssnowpack

Why the index.html of my React build is blank?

I am making a React app using Snowpack. Everything works correctly, the build is also successful. But when I am tying to open the index.html of the build, the page is blank.

I have found a temporary fix, by modifying the index.html from the build folder.

Original index.html build code (Blank page):

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React page</title>
</head>
<body>
    <div id="root"></div>
    <script src="/js/webpack-runtime.0ec3dfa59e6510ed107b.js"></script><script src="/js/lib-react-dom.743af248c46307798cb8.js"></script><script src="/js/index.6929e3680f85299b6d65.js"></script>

</body></html>

and here is the modified one that is working:

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React page</title>
</head>
<body>
    <div id="root"></div>
    <script src="./js/webpack-runtime.0ec3dfa59e6510ed107b.js"></script><script src="./js/lib-react-dom.743af248c46307798cb8.js"></script><script src="./js/index.6929e3680f85299b6d65.js"></script>

</body></html>

The trick is to replace src=/js/xxxxx.js to src=./js/xxxxx.js

The problem is that is very annoying to modify each time you build the project so is there any way to fix this ?

Here is my snowpack.config.js code:

module.exports = {
    devOptions: {
        port: 3000
    },

    mount: {
        src: "/dist",
        public: {url: "/", static: true}
    },

    plugins: [
        [
            '@snowpack/plugin-webpack', {
                htmlMinifierOptions: false
            }
        ]
    ]
}

and the script tag of my index.html:

<script src="./dist/index.js" type="module"></script>

Thanks in advance for the help !

Solution

  • I think you are pointing the public scripts load URL to be at the root of your computer, not the place that your scripts have been put!

    I think if you change your mount.public to this:

    public: {url: "./", static: true}

    It should work correctly!