Error: Attempting to access the 'set' property of an undefined object

As I work on developing a mern e-commerce site, I encountered an error on the sign-in page.

Here are the steps I've taken to resolve it:

1. Updated 'Cookies->Cookie, set->Set'

2. Changed 'res.refresh_token' to res.refresh_token

3. Downgraded js-cookies version from 3 to 2.2.1

https://i.sstatic.net/3uoHz.png

Cookies.set('refreshtoken', res.refresh_token, {
      path: 'api/auth/accessToken',
      expires: 7
    })

All code (excluding HTML):

import Head from "next/head"
import Link from "next/link"
import { useState, useContext } from "react"
import { DataContext } from "../store/GlobalState"
import { postData } from "../utils/fetchData"
import { Cookies } from 'js-cookie'

const Signin = () => {
  const initialState = { email: '', password: '' }
  const [userData, setUserData] = useState(initialState)
  const { email, password } = userData

  const { state, dispatch } = useContext(DataContext)

  const handleChangeInput = e => {
    const { name, value } = e.target
    setUserData({ ...userData, [name]: value })
    dispatch({ type: 'NOTIFY', payload: {} })
  }

  const handleSubmit = async e => {
    e.preventDefault()
    dispatch({ type: 'NOTIFY', payload: { loading: true } })
    const res = await postData('auth/login', userData)

    if (res.err) return dispatch({ type: 'NOTIFY', payload: { error: res.err } })
    dispatch({ type: 'NOTIFY', payload: { success: res.msg } })

    dispatch({
      type: 'AUTH', payload: {
        token: res.access_token,
        user: res.user
      }
    })

    Cookies.set('refreshtoken', res.refresh_token, {
      path: 'api/auth/accessToken',
      expires: 7
    })

    localStorage.setItem('firstLogin', true)
  }
}

export default Signin

Answer №1

According to the documentation provided for js-cookie, there seems to be a small issue with your import statement. You should try using the following code:

import Cookies from 'js-cookie'

If you continue importing it the way you are currently doing, it will result in returning undefined as the Cookies object is not nested within the module exports but rather is the default import.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate caching for AJAX responses, specifically in Internet Explorer?

While most people focus on preventing AJAX caching in IE, I am interested in implementing this technique for other browsers. I have attempted to use HTTP headers without success and am now feeling confused. Any assistance would be greatly appreciated. ...

Ajax is working effectively as the first post is successful and the second post is able to retrieve data

UPDATE: I resolved the issue by relocating my form submitter script from the Header to the bottom of the jamesmsg.php page (the included one). By doing this, the functions are always re-loaded and attached to the "new" form each time the div is refreshed. ...

update embed - new command

My code below creates a slash command and I'm attempting to update the embed every 10 seconds. const embed = new EmbedBuilder() .setAuthor({ name: track.title, iconURL: client.user.displayAvatarURL({ size: 1024, dynamic: true }) }) .setThumbna ...

Using JQuery to handle click events on an array of checkboxes and displaying the value of the selected

I am struggling to show the label text and checkbox value from a checkbox array whenever each one is clicked (for testing purposes, assume I want it to appear in an alert). My HTML looks like this: <label class="checkbox"> <input type="checkbox" ...

Obtain the date in the following format: 2016-01-01T00:00:00.000-00:00

Can someone help me convert this date to the correct format for the mercadolibre api? I need it to be like this: 2016-01-01T00:00:00.000-00:00 However, when I try with the following code: var date_from = new Date(); date_from.setDate(date_from.getDa ...

Challenges with JavaScript Regular Expressions

Looking to extract a specific Number enclosed within square brackets, like so: Identify the 0 within actionFields[actionFields][0][data[Report][action]] I've been working on this but keep getting a null result. var match, matchRegEx = /^\(?&bs ...

The code is anticipating a declaration or statement in JavaScript/TypeScript

Currently, I am working with Typescript 1.7 and React 0.14 using the new ES6 syntax. Specifically, I am encountering an issue with destructuring assignment, which is explained in detail here. let x0, x1, y0, y1; if(this.props.viewport) { {x0, x1, y0, ...

The functionality of RegExp is not as expected in this specific case, even though it works correctly in all

I am new to Node.js and currently transitioning from a PHP background, eager to learn more about it. My challenge involves using the following Regular Expression: /([A-Z]{2,})+/gim (identifying two or more consecutive letters). The string I am working w ...

Retrieve the innerHTML of a component post-render

My goal is to extract the SVG code generated by my own component from the DOM. Currently, I am attempting to achieve this using the following method: <my-own-component id="my-component-id" #myComponentId [data]="da ...

Error: Unable to iterate through users due to a non-function error while attempting to retrieve the firestore document

I encountered an issue with my code, receiving the error message: TypeError: users.map is not a function. Can anyone help me identify what might be wrong? const [users, setUsers] = useState([]); const getData = async () => { try { const use ...

Unlock maximum screen viewing on your custom video player with these steps to activate fullscreen

I'm having an issue with my basic video player - when toggling fullscreen, it doesn't fill the whole screen even though I tried using .fullscreen{width:100%} without success after searching for a solution. html <div class='player-contai ...

Why am I not receiving recommendations for the data types of a function parameter when there are multiple variations available?

I'm currently navigating a JavaScript codebase that utilizes Sequelize models with documented types specified in TypeScript declaration files (.d.ts). Within my code, I am utilizing model.update() to modify certain properties on the object: To replic ...

jQuery DatePicker Not Displaying Calendar

I've been attempting to implement a date picker in jQuery. I've included the necessary code within the head tag: <link rel="stylesheet" type="text/css" media="screen" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jqu ...

Sorting with map by value in JavaScript can be achieved using a few different techniques and

Hello! I'm currently learning how to work with JavaScript and Firebase. My issue is that my orders are loading in random order, but I want them sorted by time. I have attempted to sort the data from Firebase, but it still comes in randomly. I've ...

Is it possible to apply CSS based on a component's displayName?

Are you a CSS pro? I'm attempting to apply a class that will make all descendants of an element read-only, but for some reason the style isn't being applied as expected: #ComponentDisplayName * { -webkit-user-select: text; -moz-user-sel ...

Issue with updating state in SideBar.js following button click in Layout.js

Layout.js - Inside this component, there's a button that triggers the sidebar to hide or show when clicked. 'use client' import { useRef } from 'react'; import './globals.css' import Menu from '@mui/icons-material/M ...

The process of AngularJS one-time binding is triggered twice

Why does the one-time binding get called twice? var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.bar = function() { console.log('bar'); return 'bar'; ...

Mastering React children: A guide to correctly defining TypeScript types

I'm having trouble defining the children prop in TypeScript for a small React Component where the child is a function. class ClickOutside extends React.PureComponent<Props, {}> { render() { const { children } = this.props; return chi ...

Utilize a directive to showcase information stored within the scope

Struggling to grasp the concept of directives and encountering a bug along the way. To see my example in action, check out the codepen I've created here In my scope called "movies," I have 3 movie titles that I want to display using a directive. va ...

Unresolved Status Issue Upon Redirection within Node.js and Express

When sending a POST request from the client using JQuery and redirecting to the root using node.js, I am encountering an issue in my developer console where I see the status as "302 (temporarily)" and type as "Pending". Client Code: $.ajax({ type: " ...