jsx file not working

[SridharRaju18]

Hi, I'm followed you to create react app with webpack but i getting "couldnt find the module:error" when i use jsx file. working fine with js file. Please guide me where im going wrong.. webpack and package.json is same as yours with additional packages.

Package.json: { "name": "my-application", "version": "1.0.0", "description": "Application ", "private": true, "keywords": [ "react", "materialui", "redux" ], "author": "test", "homepage": ".", "license": "ISC", "dependencies": { "@date-io/core": "^1.3.6", "@date-io/date-fns": "^1.0.1", "@date-io/moment": "^1.3.13", "@material-ui/core": "^4.9.10", "@material-ui/icons": "^4.9.1", "@material-ui/pickers": "^3.2.10", "@material-ui/styles": "^4.9.10", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "axios": "^0.19.2", "body-parser": "^1.18.3", "bootstrap": "^4.1.3", "clsx": "^1.1.0", "css-loader": "^3.5.3", "date-fns": "^2.13.0", "history": "^4.10.1", "node-sass": "^4.14.1", "prop-types": "^15.7.2", "query-string": "^6.12.1", "react": "^16.13.1", "react-beautiful-dnd": "13.0.0", "react-custom-scrollbars": "^4.2.1", "react-dom": "^16.13.1", "react-loading-skeleton": "^2.0.1", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "react-textarea-autosize": "7.1.2", "redux": "^4.0.5", "redux-devtools-extension": "2.13.8", "redux-logger": "3.0.6", "redux-thunk": "2.3.0", "sass": "^1.26.5", "sass-loader": "^8.0.2", "single-spa": "^4.3.7", "single-spa-react": "^2.14.0", "style-loader": "^1.2.0", "styled-components": "5.1.0", "url-loader": "^4.1.0", "webpack": "^4.17.2", "cors": "^2.8.4" }, "scripts": { "start-react": "react-scripts start", "build-react": "react-scripts build", "test": "echo "Error: no test specified" && exit 1",

},
"eslintConfig": {
    "extends": "react-app"
},
"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ]
},
"devDependencies": {
    "@date-io/core": "^1.3.6",
    "@date-io/date-fns": "^1.0.1",
    "@date-io/moment": "^1.3.13",
    "@material-ui/pickers": "^3.2.10",
    "date-fns": "^2.13.0",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.2.0",
    "moment": "^2.25.3",
    "path": "^0.12.7",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.7",
    "clean-webpack-plugin": "0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "@babel/core": "^7.0.0",
    "@babel/node": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-loader": "^8.0.2",
    "concurrently": "^4.0.1",
    "cross-env": "^5.2.0",
    "jest": "^23.6.0",
    "style-loader": "^0.23.0"
}

}