I want to add nodemon to auto recompile project when I change the code in development.
package.json
{
"name": "insurance-web-site",
"version": "0.1.0",
"private": true,
"dependencies": {
"@kunukn/react-collapse": "^2.2.7",
"@rehooks/window-scroll-position": "^1.0.1",
"@types/dotenv": "=6.1.1",
"@types/express": "=4.17.1",
"@types/js-base64": "=2.3.1",
"@types/lodash": "=4.14.149",
"@types/morgan": "=1.7.37",
"@types/node": "10.17.17",
"@types/node-fetch": "=2.5.0",
"@types/node-sass": "=4.11.0",
"@types/react": "^16.9.16",
"@types/react-autosuggest": "^9.3.13",
"@types/react-dom": "16.8.5",
"@types/react-fontawesome": "=1.6.1",
"@types/react-helmet": "=5.0.3",
"@types/react-input-mask": "^2.0.4",
"@types/react-redux": "^7.1.5",
"@types/react-router-config": "=5.0.0",
"@types/react-router-dom": "^5.1.3",
"@types/react-select": "=3.0.2",
"@types/uuid": "^3.4.6",
"@types/whatwg-fetch": "^0.0.33",
"app-root-path": "^2.0.1",
"axios": "^0.21.1",
"babel-loader": "^8.0.6",
"babel-plugin-import": "^1.12.1",
"body-parser": "^1.18.2",
"bootstrap": "^4.3.1",
"cross-env": "^5.1.3",
"crypto": "^1.0.1",
"crypto-js": "^4.1.1",
"customize-cra": "^0.6.0",
"dotenv": "^8.1.0",
"dotenv-webpack": "^1.7.0",
"es6-promise": "^4.2.2",
"express": "^4.17.1",
"fetch-everywhere": "^1.0.5",
"file-loader": "^3.0.1",
"ignore-loader": "^0.1.2",
"ignore-styles": "^5.0.1",
"js-base64": "^2.4.3",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"lodash": "^4.17.4",
"lodash.throttle": "^4.1.1",
"morgan": "^1.9.1",
"mysql": "^2.18.1",
"node-fetch": "^2.6.0",
"node-sass": "^4.12.0",
"nodemon": "^1.19.4",
"odata-query": "6.0.0-1",
"rc-steps": "^3.5.0",
"re-reselect": "^3.4.0",
"react": "^17.0.2",
"react-app-rewire-less": "^2.1.3",
"react-app-rewired": "^2.1.3",
"react-autosuggest": "^10.0.2",
"react-bootstrap": "^1.0.0-beta.15",
"react-countdown": "^2.3.2",
"react-dom": "^17.0.2",
"react-dropdown-date": "^2.2.7",
"react-ga": "^2.6.0",
"react-helmet": "^5.2.0",
"react-hook-form": "^3.28.2",
"react-hotjar": "^2.0.2",
"react-id-generator": "^3.0.0",
"react-input-mask": "^2.0.4",
"react-lines-ellipsis": "^0.14.1",
"react-modal": "^3.11.1",
"react-modern-calendar-datepicker": "^3.1.6",
"react-owl-carousel2": "^0.3.0",
"react-redux": "7.1.3",
"react-router-config": "^5.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.0.1",
"react-scripts-ts": "2.13.0",
"react-select": "=3.0.8",
"react-spinners": "=0.7.1",
"redux": "=4.0.4",
"redux-actions": "=2.6.5",
"redux-thunk": "=2.3.0",
"reselect": "=4.0.0",
"serve-favicon": "=2.4.5",
"ts-loader": "=6.0.4",
"ts-node": "=8.3.0",
"use-media": "=1.4.0",
"use-react-router": "=1.0.7",
"uuid": "=3.3.3",
"webpack-cli": "=3.3.8",
"webpack-node-externals": "=1.7.2",
"whatwg-fetch": "=3.0.0"
},
"scripts": {
"prestart": "yarn run build",
"start": "yarn start:server",
"start:dev": "yarn run build && yarn start:server:dev",
"start:server": "cross-env NODE_ENV=production ts-node build_server/server.js",
"start:server:dev": "cross-env NODE_ENV=development ts-node build_server/server.js",
"start:client": "react-app-rewired start",
"build:server": "ts-node node_modules/webpack/bin/webpack.js --config webpack.server.config.js",
"build:client": "react-app-rewired build",
"build": "yarn run build:client && yarn run build:server",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
},
"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": {
"concurrently": "=3.5.1",
"style-loader": "=1.0.0",
"typescript": "^4.4.4"
}
}
Where exactly I should add nodemon to these scripts?
"scripts": {
"prestart": "yarn run build",
"start": "yarn start:server",
"start:dev": "yarn run build && yarn start:server:dev",
"start:server": "cross-env NODE_ENV=production ts-node build_server/server.js",
"start:server:dev": "cross-env NODE_ENV=development ts-node build_server/server.js",
"start:client": "react-app-rewired start",
"build:server": "ts-node node_modules/webpack/bin/webpack.js --config webpack.server.config.js",
"build:client": "react-app-rewired build",
"build": "yarn run build:client && yarn run build:server",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
}
I have change to this:
"start": "nodemon build_server/server.js"
But now crahes with the following error:
(node:22552) UnhandledPromiseRejectionWarning: Error: Invariant failed: You should not use <withRouter(undefined) /> outside a <Router>
at invariant (C:wamp64wwwinsurance_sitenode_modulestiny-invariantdisttiny-invariant.cjs.js:13:11)
at Object.children (C:wamp64wwwinsurance_sitenode_modulesreact-routermoduleswithRouter.js:19:11)
at e.t.render (C:wamp64wwwinsurance_sitebuild_serverserver.js:9:15905)
at e.t.read (C:wamp64wwwinsurance_sitebuild_serverserver.js:9:14282)
at t.renderToString (C:wamp64wwwinsurance_sitebuild_serverserver.js:9:19840)
at C:wamp64wwwinsurance_sitebuild_serverserver.js:1:155898
(Use `node --trace-warnings ...` to show where the warning was created)
(node:22552) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:22552) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
I think, this old project will not work with nodemon.
2
Answers
I am not sure I fully understand the question but you can modify your scripts to use nodemon with ts-node for on-the-fly TypeScript compilation. You can replace this line:
with:
As for the error, it might not be directly related to the nodemon change. You might need to debug that separately.
Try this:
Replace
src/index.tstoyour s