Bundle.js and Css file are not getting load with webpack

Viewed 1695

I recently learned react and webpack.I got into a problem while making my project.

When I am opening index.html.In browser network it is showing bundle.js not found..and also I cant see CSS files. please help me.

I don't know why my files are not showing in the network. My all files got successfully bundled.

Please help me out where my code is wrong.

My folder structure

node modules
app-(contains js jsx and css files)
public- (contains single bundle file.There is no bundle.js.map file)
package.json
package-lock.json
webpack.config.js
index.html

my webpack config

var path=require("path");

module.exports={
    entry:path.resolve(__dirname,"app"),

    output:{
    path:path.resolve(__dirname,"public"),
    filename:" bundle.js",
    },

    module:{
        rules:[
            {
                test:/\.jsx?$/,
                include:path.resolve(__dirname,"app"),
                use:[{loader:'babel-loader',

                     options: {
                                 presets: ['@babel/preset-react',{
                          'plugins': ['@babel/plugin-proposal-class-properties']}]
                             }
                     }]
            },
            {
                test:/\.css$/,
                include:path.resolve(__dirname,"app"),
                use:["style-loader","css-loader"]
            }

        ]

    }

};

my package .json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "express": "^4.17.1",
    "nodeman": "^1.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "webpack-cli": "^3.3.11"
  }
}


index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">

    <title>React</title>
  </head>
  <body>
    <div id="root"></div>

  </body>
  <script type="text/javascript" src="public/bundle.js"></script>
</html>

1 Answers

Changing the path of bundle.js to src="/public/bundle.js" inside the index.html file may resolve the problem.

Explanation:

The script tag specifies the location of bundle.js file as

src="public/bundle.js"

This path does not have a leading "/". Therefore, the path will be interpreted relative to the location of the current file being read by the browser.

Adding a leading / to the path will make the browser request the script file from a path relative to document root.

Related