Question 255732 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Add nodemon to package.json issue

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.

Tags:

2

Answers


  1. 0

    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:

     "start:server:dev": "cross-env NODE_ENV=development ts-node build_server/server.js",

    with:

    "start:server:dev": "cross-env NODE_ENV=development nodemon -r ts-node/register build_server/server.js",

    As for the error, it might not be directly related to the nodemon change. You might need to debug that separately.

    Login or Signup to reply.
  2. 0

    Try this:

    Replace src/index.ts to your s

      "scripts": {
    "dev": "ts-node-dev build_server/server.js"
  },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search