yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.48k stars 429 forks source link

Cannot set properties of undefined (setting 'isFirefox') with the last version #1323

Closed brunovolant closed 4 months ago

brunovolant commented 4 months ago

When I'm trying to render a Tagify instance, I have this eror message:

Uncaught TypeError: Cannot set properties of undefined (setting 'isFirefox') at Z (tagify.min.js:1485:1) at renderWithHooks (react-dom.development.js:14141:1) at mountIndeterminateComponent (react-dom.development.js:17432:1) at beginWork (react-dom.development.js:18728:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3733:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3777:1) at invokeGuardedCallback (react-dom.development.js:3834:1) at beginWork$1 (react-dom.development.js:23713:1) at performUnitOfWork (react-dom.development.js:22960:1) at workLoopSync (react-dom.development.js:22883:1)

Here is the code: import Tags from "@yaireo/tagify" // React-wrapper file


const tagRef = useRef();

<Tags className={"peer block bg-transparent border-0 pb-1.5 text-gray-200 focus:ring-0 sm:text-sm sm:leading-6 placeholder:text-gray-400 placeholder:text-lg w-full"} tagifyRef={tagRef} value={value || []} onChange={handleChange} onInvalid = {handleError} settings = {{ //pattern: /^[^\s]*$/, validate: function(data) { if(/\s/.test(data.value)){ return "AET '"+data.value+"' is not valid. No spaces allowed!"; } return true; } }} />

brunovolant commented 4 months ago

It was because of an upgrade from the version 4.17.9 to the last version.

I was importing tagify in my project like this: import Tags from "@yaireo/tagify/dist/react.tagify"

With the last version, this file is not there anymore so I have to change the import to: import Tags from "@yaireo/tagify

This creates the error. I have also the error if I do the same import with the version 4.17.9

Thanks in advance for your help

yairEO commented 4 months ago

Yes, you need to change the import path from:

import Tags from "@yaireo/tagify/dist/react.tagify"

To:

import Tags from "@yaireo/tagify/src/react.tagify"

Or simpler:

import Tags from "@yaireo/tagify/react"

See "breaking changes" section here: https://github.com/yairEO/tagify/releases/tag/v4.23.0

So now there is any error still?