tannerlinsley

How to fix the multiple-instances of React error when using linked NPM modules that import React as a peer dependency

Back-link your linked module's React dependency back to your application's React

In your app that you are receiving the multiple-version error:

• Go to node_modules/react
• Run yarn link

In your linked module that also uses React:

• Run yarn link react

tannerlinsley

{"contents":{"css":{"validate":false},"editor":{"formatOnSave":true},"eslint":{"enable":true},"files":{"exclude":{"build/**":false,"dist/**":false,"out/**":false,"test/coverage/**":false}},"less":{"validate":false},"prettier":{"eslintIntegration":false,"stylelintIntegration":false},"search":{"exclude":{"**/build":true,"**/coverage":true,"**/deps":true,"**/node_modules":true,"**/out":true,"**/test":false}},"scss":{"validate":true},"tasks":{"version":"2.0.0","type":"shell","tasks":[{"label":"Jest","command":"${workspaceFolder}/node_modules/.bin/jest","args":["--no-cache"],"options":{"env":{"NODE_ENV":"test","SAVI_ENV":"test"}},"group":"test","presentation":{"clear":true,"panel":"shared","reveal":"always"}},{"label":"Jest - Run Test","command":"${workspaceFolder}/node_modules/.bin/jest","args":["${file}","--detectOpenHandles","--no-cache"],"options":{"env":{"BABEL_ENV":"test","NODE_ENV":"test","SAVI_ENV":"test"}},"group":"test","presentation":{"clear":true,"panel":"shared","reveal":"always"}},{"label":"Jest - Up

tannerlinsley

import React from 'react'
import PropTypes from 'prop-types'
import { Keyboard, LayoutAnimation, Dimensions, Platform } from 'react-native'

const defaultAnimation = {
  duration: 500,
  create: {
    duration: 300,
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity,

tannerlinsley

type State = {
  added: boolean;
  interval: false | ReturnType<typeof setInterval>;
  inFrame: boolean;
  callbacks: Array<SetFocusedCallback>;
};

type EnrichedHTMLIFrameElement = HTMLIFrameElement & { ___onWindowFocusHandled: boolean };

type SetFocusedCallback = (focused?: boolean) => void;

tannerlinsley

import React from 'react'

export default function useDarkMode({
  intervalTime = 300,
  getIsDark = defaultGetIsDark,
} = {}) {
  // Keep track of the current mode
  const [isDark, setIsDark] = React.useState(() => getIsDark())

  // Set up the checker

tannerlinsley

import React from 'react'
import addDays from 'date-fns/add_days'
import isBefore from 'date-fns/is_before'
import isToday from 'date-fns/is_today'
import startOfDay from 'date-fns/start_of_day'
import differenceInCalendarMonths from 'date-fns/difference_in_calendar_months'

export default function useCalendar({
  date = new Date(),
  offset: userOffset = 0,

tannerlinsley

export default function useMicroMemo() {
  const memosRef = React.useRef(new Map());

  return (id, updater, deps) => {
    const memo = memosRef.current.get(id) || {};
    let shouldUpdate;

    if (!memo.deps) {
      shouldUpdate = true;
    } else if (deps.length !== memo.deps.length) {

tannerlinsley

function removeFirstConnection () {
  $('[type=ellipsis-horizontal-icon]').first().click()
  setTimeout(() => {
    $('.js-mn-connection-card__dropdown-delete-btn > button').click()
    setTimeout(() => {
      $('[data-control-name="confirm_removed"]').click()
    }, 250)
  }, 250)
}

tannerlinsley

import React, { useReducer, useEffect, useState, useRef } from 'react'
import PropTypes from 'prop-types'
import { createSelector } from 'reselect'
import { connect } from 'react-redux'
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import includes from 'ramda/src/includes'
import { DEBOUNCE_DELAY } from '../../../reference/constants'
import { loadContacts } from '../../../actions/v2/contactsActions'
import { useDebounce } from '../../../reference/hooks'

tannerlinsley

const useLogout = () => {
  // Use any store you want!
  const [_, setStore] = Store.useStore()

  // Have a localStorage hook?
  const [_, setUserToken] = useLocalStorage('userToken')

  // Have a router hook?
  const { navigate } = useLocation()