I have React project that created by Razzle v3 and React 16, my plan to upgrade project to use React 18. I upgrade the packages but I'm notice many of issues related .bablrc and localhost:3000 running without any content "similar to internet disconnected"
I tried to follow existing project using latest Razzle and used same babel version, but I still have the same issue.
My .babelrc file:
{
"presets": ["razzle/babel"],
"plugins": ["styled-components"],
"env": {
"production": {
"only": ["src"],
"plugins": [
"lodash",
"transform-react-remove-prop-types",
"@babel/plugin-transform-react-inline-elements",
"@babel/plugin-transform-react-constant-elements"
]
}
}
}
This is my package.json file:
{
"name": "Linz-Heritage-Angus",
"version": "0.1.0",
"license": "MIT",
"description": "Linz Heritage Angus",
"author": "Alpha Solutions",
"scripts": {
"lint": "eslint ./src",
"lint:fix": "eslint --fix ./src",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start": "NODE_ENV=production node build/server.js",
"start:dev": "razzle start"
},
"dependencies": {
"@fluentui/react": "^8.9.2",
"@fluentui/react-icons": "1.1.117",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"@lagunovsky/redux-react-router": "^4.3.0",
"@reduxjs/toolkit": "^1.4.0",
"axios": "^0.19.2",
"date-fns": "^2.16.1",
"express": "^4.17.1",
"final-form": "^4.20.1",
"final-form-focus": "^1.1.2",
"fontfaceobserver": "2.0.13",
"history": "^5.3.0",
"hoist-non-react-statics": "3.0.1",
"intl": "1.2.5",
"invariant": "2.2.4",
"isemail": "^3.2.0",
"lodash": "4.17.20",
"mobile-device-detect": "^0.4.3",
"polished": "^3.5.1",
"prop-types": "^15.7.2",
"query-string": "^7.0.0",
"razzle": "^4.2.18",
"react": "^18.2.0",
"react-cool-onclickoutside": "^1.4.8",
"react-datepicker": "^4.16.0",
"react-dom": "^18.2.0",
"react-final-form": "^6.5.1",
"react-helmet": "^6.0.0-beta",
"react-infinite-scroller": "^1.2.4",
"react-intl": "^6.4.7",
"react-lazyload": "github:twobin/react-lazyload",
"react-modal": "^3.11.2",
"react-redux": "^8.1.2",
"react-router": "^6.16.0",
"react-router-dom": "^5.2.0",
"react-select": "^5.7.4",
"react-slick": "^0.29.0",
"react-spinners": "^0.13.8",
"react-spring": "^8.0.27",
"react-sticky-el": "^2.0.5",
"react-tippy": "^1.4.0",
"react-tooltip": "^4.2.10",
"react-transition-group": "^4.3.0",
"react-visibility-sensor": "^5.1.1",
"redux": "4.0.1",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "4.0.0",
"sanitize.css": "4.1.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.0",
"styled-normalize": "^8.0.7",
"universal-cookie": "^4.0.3"
},
"devDependencies": {
"@arkweid/lefthook": "^0.7.2",
"@babel/eslint-parser": "^7.22.15",
"@babel/plugin-proposal-do-expressions": "^7.22.5",
"@babel/plugin-transform-react-constant-elements": "^7.22.5",
"@babel/plugin-transform-react-inline-elements": "^7.22.5",
"@eslint-kit/base": "^1.0.0",
"@eslint-kit/prettier": "^1.0.0",
"@eslint-kit/react": "^1.0.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-styled-components": "1.11.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"eslint": "^8.49.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-react-app": "7.0.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-unicorn": "^48.0.1",
"prettier": "^2.1.2"
}
}