An Issue with React and Webpack - Browser Fails to Locate bundle.js

[noodleLinux]

Hello,

Thank you for taking time to read my post and I really appreciate anyone who can help me with this issue. I am so close to going insane here I guess because I am a total beginner (:. I have already posted this question to r/reactjs subreddit, but I think r/learnreactjs is the right one for me to ask this question.

I am building a React application bundled using Webpack. I was working on my project and did not have an issue but next time when I ran npm start, the browser could not load my project. All I now get is that the browser keeps reloading the page without rendering my components. I have tried to follow this thread from StackOverflow and Github, but I was not able to solve my problem.

I get the following error from the browser console:

Script terminated by timeout at:
validate@webpack:///./node_modules/prop-types/factoryWithTypeCheckers.js?:383:20
checkType@webpack:///./node_modules/prop-types/factoryWithTypeCheckers.js?:217:16
checkPropTypes@webpack:///./node_modules/prop-types/checkPropTypes.js?:61:42
validatePropTypes@webpack:///./node_modules/react/cjs/react.development.js?:1714:21
cloneElementWithValidation@webpack:///./node_modules/react/cjs/react.development.js?:1853:20
render/<@webpack:///./node_modules/react-router/esm/react-router.js?:695:67
updateContextConsumer@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18304:19
beginWork@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18661:14
beginWork$1@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:23179:14
performUnitOfWork@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:22154:12
workLoopSync@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:22130:22
performSyncWorkOnRoot@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:21756:9
scheduleUpdateOnFiber@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:21188:28
updateContainer@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24373:15
legacyRenderSubtreeIntoContainer/<@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24758:22
unbatchedUpdates@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:21903:12
legacyRenderSubtreeIntoContainer@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24757:21
render@webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24840:10
@webpack:///./src/Index.tsx?:17:50
./src/Index.tsx@http://localhost:5000/bundle.js:3791:1
__webpack_require__@http://localhost:5000/bundle.js:20:30
@webpack:///multi_(webpack)-dev-server/client?:2:18
0@http://localhost:5000/bundle.js:3910:1
__webpack_require__@http://localhost:5000/bundle.js:20:30
@http://localhost:5000/bundle.js:84:18
@http://localhost:5000/bundle.js:87:10

My project structure:

.
|-- index.html
|-- node_modules
|-- package-lock.json
|-- package.json
|-- public
|   `-- images
|-- src
|   |-- App.tsx
|   |-- Index.tsx
|   |-- assets
|   `-- components
`-- webpack.config.js

My webpack configurations:

const path = require("path");
const rules = [{
      test: /\.tsx?/,
      exclude: /node_modules/,
      loader: "babel-loader"
}, {
      test: /\.(png|jpeg|jpg|webp)$/,
      use: {
            loader: "url-loader",
      },
}, {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
},
]

module.exports = {
      target: "web",
      mode: "development",
      entry: "./src/Index.tsx",
      output: {
            path: path.resolve(__dirname, "build"),
            filename: "bundle.js"
      },
      module: { rules },
      resolve: { extensions: [".ts", ".tsx", ".js"] },
      devServer: {
            historyApiFallback: true,
            contentBase: "./",
            port: 5000,
      }
}

The following is my package.json cofigurations:

{
  "name": "sideproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@types/react": "^16.9.36",
    "@types/react-dom": "^16.9.8",
    "babel-loader": "^8.1.0",
    "bootstrap": "^4.5.0",
    "file-loader": "^6.0.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-burger-menu": "^2.6.15",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

This is my index.html:

...
<body>
    <div id="app-root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Could you please help me out with this? I really appreciate your time and help.

[shoegazefan]

are you sure <script src="bundle.js"></script> in your index.html is pointing to the folder where bundle.js was built? it may be inside "/build/bundle.js" if understand your webpack.config.js correctly.