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"
}

}