DEV Community

Hafiz Saifullah
Hafiz Saifullah

Posted on

Error: [nodemon] app crashed - waiting for file changes before starting...

#node #javascript #react

Hey...! I am facing above error while trying to run
npm run dev-client in 2nd instance of terminal, while in 1st instance of terminal, there is already running both front-end and back-end servers by using npm run dev command.

Complete error message is given below...

$ npm run dev-peer

> crypto@1.0.0 dev-peer C:\Users\Education Use\crypto
> cross-env GENERATE_PEER_PORT='true' ENV='development' nodemon index.js   

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
listening at localhost: 3847
replace transaction pool map on a sync with {}
undefined:1
<!doctype html>
^

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Request._callback (C:\Users\Education Use\crypto\index.js:95:36)    
    at Request.self.callback (C:\Users\Education Use\crypto\node_modules\request\request.js:185:22)
    at Request.emit (events.js:315:20)
    at Request.<anonymous> (C:\Users\Education Use\crypto\node_modules\request\request.js:1154:10)
    at Request.emit (events.js:315:20)
    at IncomingMessage.<anonymous> (C:\Users\Education Use\crypto\node_modules\request\request.js:1076:12)
    at Object.onceWrapper (events.js:421:28)
    at IncomingMessage.emit (events.js:327:22)
    at endReadableNT (_stream_readable.js:1221:12)
[nodemon] app crashed - waiting for file changes before starting...
Enter fullscreen mode Exit fullscreen mode

here is package.json file...

{
  "name": "crypto",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "jest --watchAll",
    "start": "npm run build-client && node index.js",
    "dev": "concurrently \"npm run dev-client\" \"nodemon index.js\"",
    "dev-peer": "cross-env GENERATE_PEER_PORT='true' ENV='development' nodemon index.js",
    "start-redis": "redis-server --daemonize yes",
    "build-client": "npm run clean && parcel build client/src/index.html --out-dir client/dist",
    "dev-client": "npm run clean && parcel client/src/index.html --out-dir client/dist",
    "clean": "rm -rf .cache client/dist"
  },
  "jest": {
    "testEnvironment": "node"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "cross-env": "^7.0.2",
    "jest": "^26.0.1",
    "nodemon": "^2.0.4"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "concurrently": "^5.2.0",
    "elliptic": "^6.5.3",
    "express": "^4.17.1",
    "hex-to-binary": "^1.0.1",
    "history": "^4.7.2",
    "parcel-bundler": "^1.12.4",
    "pubnub": "^4.28.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.2.2",
    "react-dom": "^16.13.1",
    "react-router-dom": "^4.3.1",
    "redis": "^3.0.2",
    "request": "^2.88.2",
    "uuid": "^3.3.2"
  },
  "description": ""
}
Enter fullscreen mode Exit fullscreen mode

What should i do to solve this issue???

Top comments (11)

Collapse
 
garretharp profile image
Garret •

The part you specifically need is:

<!doctype html>
^

SyntaxError: Unexpected token < in JSON at position 0

You're getting an HTML string somewhere instead of a JSON string.

Check your code for where you are using JSON.parse and surround it in a try-catch to find which place the error is occurring.

Collapse
 
hafizsaifullah profile image
Hafiz Saifullah •

Than for your kind response.
JSON.parse() is used in crypto/index.js file in following method...,

const syncWithRootState = ()=> {
    request({ url: `${ROOT_NODE_ADDRESS}/api/bocks` }, (error, response, body)=> {
        if (!error && response.statusCode === 200) {
            const rootChain = JSON.parse(body);

            console.log('replace transaction pool map on a sync with', rootChain);
            blockchain.replaceChain(rootChain);
        }
    });

    request({ url: `${ROOT_NODE_ADDRESS}/api/transaction-pool-map` }, (error, response, body) => {
        if (!error && response.statusCode === 200) {
            const rootTransactionPoolMap = JSON.parse(body);

            console.log('replace transaction pool map on a sync with', rootTransactionPoolMap);
            transactionPool.setMap(rootTransactionPoolMap);
        }
    });
}

what changing should be done???

Collapse
 
garretharp profile image
Garret • • Edited

From the original error message, the log in the first request was made "replace transaction pool map on a sync with {}" which means the second request is the issue.

The API response from /api/transaction-pool-map is giving an HTML document rather than a JSON response. You will need to see what exactly the issue is on the API side of this.

However, also for the fact that you do not want your app to error out like that on users, you should also surround the JSON parse code with try-catch or create a new function that safely parses JSON without crashing.

For example a safe parse might be:

function safeParse (data) {
  try {
    const result = JSON.parse(data);
    return result; // Success valid JSON
  } catch (e) {
    console.error('JSON data error', data, e)
    return undefined; // Data was not valid JSON
  }
}
Thread Thread
 
hafizsaifullah profile image
Hafiz Saifullah •

When I run only one instance of app, either by using npm run dev or by using npm run dev-peer, it works fine. but when I try to run a second instance, app is crashed.
Is there may be an issue with installation or use of "cross-env"???

Collapse
 
hafizsaifullah profile image
Hafiz Saifullah •

Thanx to @Garret, I have resolved my issue by replacing

const rootChain = JSON.parse(body);
console.log('replace transaction pool map on a sync with', rootChain);
blockchain.replaceChain(rootChain);

with

function safeParse (body) {
                const rootChain = JSON.parse(body);
                console.log('replace transaction pool map on a sync with', rootChain);
                blockchain.replaceChain(rootChain);
}
Collapse
 
dcodeyt profile image
Dom (dcode) •

It's possible that the API you're using supports either an HTML or JSON response. You could try setting the Accept header to "application/json" to see if you then get a JSON response back.

Thread Thread
 
hafizsaifullah profile image
Hafiz Saifullah •

Thank You @dom for your kind response, but I am new to coding, so I am facing troubles to understand that what is Accept header and how can I set it to "application/json".

Collapse
 
hafizsaifullah profile image
Hafiz Saifullah •

Another occurrence of JSON.parse() is in crypto/app/pubsub.js file in listener() method.
Following is listener() method.

listener() {
        return {
            message: messageObject => {
                const { channel, message } = messageObject;

                console.log(`Message received. Channel: ${channel}. Message: ${message}`);
                const parsedMessage = JSON.parse(message);

                switch(channel) {
                    case CHANNELS.BLOCKCHAIN:
                        this.blockchain.replaceChain(parsedMessage, true, () => {
                            this.transactionPool.clearBlockchainTransactions({
                                chain: parsedMessage 
                            });
                        });
                        break;
                    case CHANNELS.TRANSACTION:
                        if (!this.transactionPool.existingTransaction({
                            inputAddress: this.wallet.publicKey
                        })) {
                            this.transactionPool.setTransaction(parsedMessage);
                        }
                        break;
                    default:
                        return;
                }
            }
        }
    }
Collapse
 
hafizsaifullah profile image
Hafiz Saifullah •

When I run only one instance of app, either by using npm run dev or by using npm run dev-peer, it works fine. but when I try to run a second instance, app is crashed.
Is there may be an issue with installation or use of "cross-env"???

Collapse
 
hafizsaifullah profile image
Hafiz Saifullah •

Thanx to @Garret, I have resolved my issue by replacing

const rootChain = JSON.parse(body);
console.log('replace transaction pool map on a sync with', rootChain);
blockchain.replaceChain(rootChain);

with

function safeParse (body) {
                const rootChain = JSON.parse(body);
                console.log('replace transaction pool map on a sync with', rootChain);
                blockchain.replaceChain(rootChain);
}
Collapse
 
mjswensen profile image
Matt Swensen •

Whenever you see Unexpected token < in JSON, you can bet that your code is making a request for some JSON but the server is responding with HTML—which is usually an HTML error page. If you can inspect that HTML response it will probably give you a clue as to what’s going on.

View full discussion (11 comments)

Read next

gyantocode profile image

Building a Custom Audio Player in React: A Step-by-Step Guide

Nilesh Kumar -

javadibrahimli profile image

Possible to Do Panoramic Image Stitching in React Native?

Javad İbrahimli -

chintanonweb profile image

Say Goodbye to Unnecessary Re-Renders with React Memo: Step-by-Step Tutorial

chintanonweb -

hamzakhan profile image

🛠️ React Server Components vs. Client Components: When to Use Which? ⚡

Hamza Khan -