not able to start a new basic React application in Windows-CodePudding

I am creating a basic React application in windows OS, everything went fine but when i am doing npm start the application is not getting loaded on localhost:3000. i am seeing the error Cannot GET /.

Here is the complete structure of my project -

- webpack.config.js

- package.json

- index.html

- .babelrc

- src / index.html

- src / app.jsx

webpack.config.js file -

const webpack = require("webpack");
const path = require("path");

module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
module: {
    rules: [
    {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
    },
    ],
},
resolve: {
    extensions: ["*", ".js", ".jsx"],
},
output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
    contentBase: path.resolve(__dirname, "./dist"),
    hot: true,
},
};

package.json file

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development --port 3000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.13.9",
    "react-hot-loader": "^4.13.0",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "@babel/core": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2"
  }
}

index.html file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="./dist/main.js"></script>
    </body>
</html>

.babelrc file

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

src/index.js file

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
ReactDOM.render(<App />, document.getElementById("app"));
// hot reloading. It works by replacing a module of the application 
// during runtime with an updated one so that it’s available for instant use.
module.hot.accept();

src/app.jsx file

import React from 'react'

const App = () => {
  return (
    <h1>
     React application
    </h1>
  )
}

export default App;

Note: when i am running npm start in command-prompt, i am not seeing dist/ getting created.

CodePudding user response：

I think you created react project using old version of create-react-app. Try upgrading to latest version and create project using upgraded create-react-app.

CodePudding user response：

Below are the changes you need to do

webpack.config.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    modules: [path.join(__dirname, "./src"), "node_modules"],
    extensions: ["*", ".js", ".jsx"],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"),
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "./dist"),
    hot: true,
    open: true,
  },
};

In file src/index.js replace

document.getElementById("app")

with

document.getElementById("root")

After making these changes, install html-webpack-plugin and start your app using npm start