remchi/crud-with-redux

crud-with-redux's Issues

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

I'm following this link for setting up nodejs with react

I've succeeded in setting up my nodejs Express for my reactjs project. But when i try to print the data on the front end, am getting this Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0. Where my express backend should send a json response but instead its sending an html response in Network tab.

So my Front code doesn't recognize it and print it in front end. Please help me to resolve this issue.

My expressjs code

 var express = require("express");

 var app = express();

 var cors  = require('cors');

 app.use(cors());

 //my code for https

 var https = require('https')
 var fs = require('fs');
 var key = fs.readFileSync('example.key');
 var cert = fs.readFileSync('example.crt');
 var server = https.createServer({ key: key, cert: cert }, app);
 process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
 server.listen(3001, () => { console.log('App listening on port 3001! Go to 
 https://172.10.10.130:3001/prod') });


app.get("/prod", (req, res) => {
res.redirect("https://172.10.10.130")
res.json({ message: "Hello from Express!" });
});

My react frontend code

 import React, {Component} from 'react';

 class Product extends Component {

 state = {
   data: ''
  };

 componentDidMount() {
  this.callBackendAPI()
    .then(res => this.setState({ data: res.message }))
    .catch(err => console.log(err));
  }
   // fetching the GET route from the Express server which matches the 
  GET route from server.js
   callBackendAPI = async () => {
   const response = await fetch('/prod', {
     method: 'GET',
     mode: 'cors',
     headers: {
       'Content-Type': 'application/json',
     },
    
   })
      .then(res => res.json())
    
     const body = await response.json();
   

  if (response.status !== 200) {
   throw Error(body.message) 
  }
 return body;
};


 render() {
   return (
    <>

      <div className="App">
    <header className="App-header">
     <img src={logo} className="App-logo" alt="logo" />
     <p>Welcome ! {this.state.data}</p>
   </header>
   </div>

    </>                     
      );
    }
    }
  export default Product; 

When i hit https://172.10.10.130:3001/prod, as per my node js code it's redirecting me to https://172.10.10.130 where my react front end runs. But its not fetching the value and printing it in my front end. Instead am getting SyntaxError: Unexpected token < in JSON at position 0 in console. This is because the response its fetching seems to be in html but i need it in json format.

PS: this code works fine, when i use both the front end and backend both in http with localhost but am getting html response in while hitting in https May i know what needs to be done from my end.

I would like to make it work in https

When i hit https://172.10.10.130:3001/prod it redirects me to https://172.10.10.130 but without fetching data.

Please help me to resolve this issue. Thanks in advance

Uncaught Error: Element type is invalid: expected a string (for built-in components)

I have just completed the 7th video of the series.
It is possible that I deleted the node_modules folder and re-ran npm install to make the following warning/error occur. I am on the hunt for the solution myself, but posting in the hopes that some else has had this issue and has been able to fix it.

I did try and rollback to a previous commit (hence the rm-rf node_modules) and haven't been able to fix the issue.

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
printWarning @ warning.js:36
warning @ warning.js:60
createElement @ ReactElementValidator.js:171
(anonymous) @ index.js:39
(anonymous) @ bundle.js:1363
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous) @ multi_main:3
(anonymous) @ bundle.js:589
__webpack_require__ @ bundle.js:556
(anonymous) @ bundle.js:579
(anonymous) @ bundle.js:582
invariant.js:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:77)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:140)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)

Exception in This Project

I tried to run it after download and setup but I get the exception as in attached image

Got this issue in video no 2, When setting up Link from react-router.
Does it need webpack setting too?

run npm start in the backend

in the third tutorial after the config of server and nodemon run npm start and get in the page just return "Cannot GET / " why ? keep the same code like yours, check my repo please

can not start the app

i try to start the application but i only get a white screen
i start the front-end with npm run start in the main directory and i start the backend with npm run start in the backend directory.
what am i doing wrong ???
please help me it was a great tutorial i will love to play a bit with the code for learning even more

keep getting error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Hi all,
I am having a trouble with this "Unexpected token < in JSON at position 0." I tried to utilize all the help I can get from online and still no luck. Anyone has an idea what is going on with this? I followed the code as it is and I am getting error. I am running crud at 3000 and backend at 8080 and they are both running without crushing on each other. I even checked the backend part and it is working fine. Since error occurred, the redux devtool extension or the state of fetching games is not in proper session. Thank you in advance!

React Router issue

Hi I am getting the following error when I try to run this project

Warning: Failed context type: Required context `router.push` was not specified in `Link`

I guess this has something to do with the react router version that is used in this project. I have very rudimentary knowledge of the react routerv4 can someone help me with this ?