CODEWITHSUNDEEP
reactjs
Deepak Bandi
Deepak Bandi

Reputation: 1904

process.env is not accessible in one of the React JS file

Below is my folder structure of client side React JS code. I'm able to access process.env from account, checkout pages, but not in chat even though chat is in the same folder directory as compared to other two.

|-- client
    |-- src
        |-- account
            |-- account.js
            |-- account.css
        |-- checkout
            |-- checkout.js
            |-- checkout.css
        |-- chat
            |-- chat.js
            |-- chat.css

Update - Here is my chat component

import "./chat.scss";
import { to_Decrypt, to_Encrypt } from "../../aes.js";
import { process } from "../../store/action/index";
import React, { useState, useEffect, useRef } from "react";
import ReactStars from 'react-stars';
import moment from 'moment';
import { render } from 'react-dom'
import { useDispatch } from "react-redux";
import axios from 'axios';
import { useHistory } from "react-router-dom";
import ratingImg from '../../public/review.png';

function Chat({ username, roomname, socket, serverURL }) {
  const [text, setText] = useState("");
  const [messages, setMessages] = useState([]);
  const [review, setReview] = useState([]);
  const [rating, setRating] = useState([]);
  const [taskId, settaskId] = useState("");
  const [userId, setuserId] = useState("");
  const [isExpert, setisExpert] = useState(true);
  const [isLoggedIn, setisLoggedIn] = useState(false);
  const [isModelOpen, setisModelOpen] = useState(false);

  const dispatch = useDispatch();
  const question = localStorage.getItem('question');
  let history = useHistory();

  const dispatchProcess = (encrypt, msg, cipher) => {
    dispatch(process(encrypt, msg, cipher));
  };

  useEffect(() => {
    if(window.performance){
      if(performance.navigation.type == 1){
        console.log("This page is reloaded");
        socket.emit("joinRoom", { username, roomname });
      }
    }
    console.log(serverURL);
    axios.get(`${process.env.REACT_APP_SERVER_URL}/users/isLoggedIn`, {
      withCredentials: true,
      headers: {
          'Access-Control-Allow-Credentials' : true,
          'Access-Control-Allow-Origin' : 'http://localhost:3000',
          'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
      }
    })
    .then(function (response) {
        console.log(response.data);
        setuserId(response.data._id);
        if(!response.data){
            setisLoggedIn(false);
            history.push('/');
        }
        else{
            setisLoggedIn(true);
            axios.get(`${process.env.REACT_APP_SERVER_URL}/tasks/room_details/${roomname}`)
            .then(res => {
                console.log(res.data);
                settaskId(res.data.tasks[0]._id);
                if(res.data.tasks[0].username === username){
                  setisExpert(false);
                }
            });
        }
    });


    socket.on("message", (data) => {
      //decypt
      const ans = to_Decrypt(data.text, data.username);
      dispatchProcess(false, ans, data.text);
      console.log(ans);
      let temp = messages;
      temp.push({
        userId: data.userId,
        username: data.username,
        text: ans,
      });
      setMessages([...temp]);

    });
  }, [socket]);

Upvotes: 0

Views: 183

Answers (1)

Viet
Viet

Reputation: 12779

I saw you have other process was import from "../../store/action/index"

import { process } from "../../store/action/index";

So it override the process system. Just rename your process when import

  import { process as processAction } from "../../store/action/index";

  const dispatchProcess = (encrypt, msg, cipher) => {
    dispatch(processAction (encrypt, msg, cipher));
  };

Upvotes: 4

Related Questions