React / Webpack : Blank Page After Execution

[Gargantua]

I just started learning Webpack to make a React weather-app chrome extension. All the bundled files have been put in the default “dist” folder (as shown). However, when I am opening the “index.html” in the “dist” folder, the page on the live server is blank. Can someone help with find where I have made a mistake? I have enclosed all the screenshots which I believe, may help in debugging the problem.

(1) File Structure

(2) Index.js file
NOTE: using require, the index.html file in the src folder is called (from what I have understood)

(3) Webpack.config.js File
NOTE: Is the entry point correct here?

(4) package.json()
NOTE: Is the “main” correct here?

(5) index.html

[Sky020]

Hello there,

You are more likely to get help, if you share a link to a repository hosting your latest code instead of screenshots of code.

---

Otherwise, here are my immediate thoughts:

• How are you serving the dist folder? You mention a “live server”, but are you sure this is serving the correct folder from the correct directory?
• I have never seen that require('file-loader?... in client-side code. Is require defined by a Webpack plugin you are using?

[Gargantua]

@Gargantua

I just started learning Webpack to make a React weather-app chrome extension. All the bundled files have been put in the default “dist” folder (as shown). However, when I am opening the “index.html” in the “dist” folder, the page on the live server is blank. Can someone help with find where I have made a mistake? I have enclosed all the screenshots which I believe, may help in debugging the problem.

(1) File Structure

(2) Index.js file
NOTE: using require, the index.html file in the src folder is called (from what I have understood)

(3) Webpack.config.js File
NOTE: Is the entry point correct here?

(4) package.json()
NOTE: Is the “main” correct here?

(5) index.html

The Git Hub Link for the React App →

Git Hub Link for Weather App

[Gargantua]

Hi! Here is the link my Github → Git Hub Link for Weather App. Could you help?

I was trying to open the live server on my VS code terminal using the “npm start” command … there it showed an error that “the index.html file doesn’t exist”. I assumed that the “npm start” command wouldn’t work for a webpack bundled file. So, I tried to use the live server option we get upon right clicking on the file. There I am getting a blank page.

[lasjorg]

The type value for the script element is type="text/jsx" on the dist bundle (doesn’t look like a “real” build as it isn’t minified).

I’m not a webpack expert so there might be an easy fix but I would start over and not use react-react-app at all if you want to set up webpack manually (or eject to use CRA I’m guessing). I’m not sure you really need to do it manually though (example extension using CRA).

This template works for me and here is the accompanying article. You will have to add the other plugins again if you need them.

You might also want to give Vite a look (plugin or a boilerplate).

[Gargantua]

Thank you so much for the help! Will check it out