search

seawind543 / react-token-input

A react token (tag) input component. Allow customize data structure and Look & Feel
https://seawind543.github.io/react-token-input/
MIT License
28 stars 6 forks source link

Crashes after updating to 2.6.0 from 2.5.2 #137

Open rcbevans opened 2 weeks ago

rcbevans commented 2 weeks ago

I recently did a package bump to update react-customize-token-input to 2.6.0 from 2.5.2 and the site now crashes wherever there is a TokenInput component.

Uncaught TypeError TypeError: Cannot read properties of undefined (reading 'container')
    at <anonymous> (/Users/u/source/mf/packages/client/node_modules/react-customize-token-input/lib/webpack:/TokenInput/src/TokenInput.tsx:104:188)
    at renderWithHooks (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
    at updateForwardRef (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:19245:20)
    at beginWork (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:21675:16)
    at callCallback2 (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at invokeGuardedCallbackDev (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at beginWork$1 (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:27490:7)
    at performUnitOfWork (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:26596:12)
    at workLoopSync (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:26505:5)
    at renderRootSync (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:26473:7)
    at performConcurrentWorkOnRoot (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:25777:74)
    at workLoop (/Users/u/source/mf/packages/client/node_modules/scheduler/cjs/scheduler.development.js:266:34)
    at flushWork (/Users/u/source/mf/packages/client/node_modules/scheduler/cjs/scheduler.development.js:239:14)
    at performWorkUntilDeadline (/Users/u/source/mf/packages/client/node_modules/scheduler/cjs/scheduler.development.js:533:21)
    --- postMessage ---
    at schedulePerformWorkUntilDeadline (/Users/u/source/mf/packages/client/node_modules/scheduler/cjs/scheduler.development.js:574:10)
    at performWorkUntilDeadline (/Users/u/source/mf/packages/client/node_modules/scheduler/cjs/scheduler.development.js:538:9)
    --- postMessage ---
    at schedulePerformWorkUntilDeadline (/Users/u/source/mf/packages/client/node_modules/scheduler/cjs/scheduler.development.js:574:10)
    at requestHostCallback (/Users/u/source/mf/packages/client/node_modules/scheduler/cjs/scheduler.development.js:588:5)
    at unstable_scheduleCallback (/Users/u/source/mf/packages/client/node_modules/scheduler/cjs/scheduler.development.js:441:7)
    at scheduleCallback$1 (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:27576:14)
    at ensureRootIsScheduled (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:25722:23)
    at scheduleUpdateOnFiber (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:25570:5)
    at dispatchSetState (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:16708:7)
    at <anonymous> (/Users/u/source/mf/packages/client/node_modules/react-hot-toast/src/core/store.ts:167:5)
    at u2 (/Users/u/source/mf/packages/client/node_modules/react-hot-toast/src/core/store.ts:166:13)
    at n2.dismiss (/Users/u/source/mf/packages/client/node_modules/react-hot-toast/src/core/toast.ts:52:3)
    at onSuccess (/Users/u/source/mf/packages/client/src/Hooks/useProfile.ts:104:15)
    at <anonymous> (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/notifyManager.js:62:18)
    at NotifyManager2.notifyFn (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/notifyManager.js:10:7)
    at <anonymous> (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/notifyManager.js:77:20)
    at <anonymous> (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/notifyManager.js:76:17)
    at batchedUpdates$1 (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:26179:12)
    at <anonymous> (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/notifyManager.js:75:16)
    --- Promise.then ---
    at scheduleMicrotask (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/utils.js:322:21)
    at flush (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/notifyManager.js:74:7)
    at batch (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/notifyManager.js:30:14)
    at dispatch (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/query.js:392:19)
    at setData (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/query.js:85:10)
    at onSuccess (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/query.js:336:16)
    at resolve2 (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/retryer.js:58:50)
    --- Promise.then ---
    at run2 (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/retryer.js:116:37)
    at Retryer2 (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/retryer.js:156:3)
    at fetch (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/query.js:332:20)
    at executeFetch (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/queryObserver.js:199:37)
    at onSubscribe (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/queryObserver.js:40:14)
    at subscribe (/Users/u/source/mf/packages/client/node_modules/react-query/es/core/subscribable.js:16:10)
    at <anonymous> (/Users/u/source/mf/packages/client/node_modules/react-query/es/react/useBaseQuery.js:60:32)
    at commitHookEffectListMount (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:23189:26)
    at commitPassiveMountOnFiber (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:24965:13)
    at commitPassiveMountEffects_complete (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:24930:9)
    at commitPassiveMountEffects_begin (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:24917:7)
    at commitPassiveMountEffects (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:24905:3)
    at flushPassiveEffectsImpl (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:27078:3)
    at flushPassiveEffects (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:27023:14)
    at commitRootImpl (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:26974:5)
    at commitRoot (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:26721:5)
    at performSyncWorkOnRoot (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:26156:3)
    at flushSyncCallbacks (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:12042:22)
    at <anonymous> (/Users/u/source/mf/packages/client/node_modules/react-dom/cjs/react-dom.development.js:25690:13)

The imports are 

import TokenInput from 'react-customize-token-input';
import 'react-customize-token-input/dist/react-customize-token-input.css';

And the usage is

        <TokenInput
          tokenValues={enteredEmails}
          onTokenValuesChange={setEnteredEmails}
          placeholder={
            enteredEmails.length
              ? 'Enter more emails...'
              : "Not who you're looking for? Enter their email addresses..."
          }
          separators={[',', ' ']}
        />

Nothing related to how the code is imported or used was changed, just the minor version rev.

The site is built using vite: "^5.4.2" in case that is useful or relevant. sass: "^1.77.8" and node-sass: "^9.0.0"

The offending line of source from TokenInput seems related to sass styles https://github.com/seawind543/react-token-input/blob/master/src/TokenInput.tsx#L682-L685

Please let me know if there's anything I can do to help figure out what's going on.

rcbevans commented 2 weeks ago

For now I have pinned back to 2.5.2.