'Tagify' is declared but its value is never read

[sxshateri]

im trying to use Tagify in my project but either the document is not clear about how to use it or im the worst person in terms of JS. i added the import Tagify from '@yaireo/tagify'; in my app.js and compiled it with no error but then i returned to the app.js i got the IDE warning of 'Tagify' is declared but its value is never read and i have no idea what should i do about this. also in the console i get the Uncaught ReferenceError: Tagify is not defined error.

also im using the following script in my blade file to use the tagify on a textbox:

<script>
        var input = document.querySelector('textarea[name=web-skills]'),
            tagify = new Tagify(input, {
                enforceWhitelist : true,
                delimiters       : null,
                whitelist        : ["The Shawshank Redemption", "The Godfather", "The Godfather: Part II", "The Dark Knight", "12 Angry Men", "Schindler's List", "Pulp Fiction", "The Lord of the Rings: The Return of the King", "The Good, the Bad and the Ugly", "Fight Club", "The Lord of the Rings: The Fellowship of the Ring", "Star Wars: Episode V - The Empire Strikes Back", "Forrest Gump", "Inception", "The Lord of the Rings: The Two Towers", "One Flew Over the Cuckoo's Nest", "Goodfellas", "The Matrix", "Seven Samurai", "Star Wars: Episode IV - A New Hope", "City of God", "Se7en", "The Silence of the Lambs", "It's a Wonderful Life", "The Usual Suspects", "Life Is Beautiful", "Léon: The Professional", "Spirited Away", "Saving Private Ryan", "La La Land", "Once Upon a Time in the West", "American History X", "Interstellar", "Casablanca", "Psycho", "City Lights", "The Green Mile", "Raiders of the Lost Ark", "The Intouchables", "Modern Times", "Rear Window", "The Pianist", "The Departed", "Terminator 2: Judgment Day", "Back to the Future", "Whiplash", "Gladiator", "Memento", "Apocalypse Now", "The Prestige", "The Lion King", "Alien", "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb", "Sunset Boulevard", "The Great Dictator", "Cinema Paradiso", "The Lives of Others", "Paths of Glory", "Grave of the Fireflies", "Django Unchained", "The Shining", "WALL·E", "American Beauty", "The Dark Knight Rises", "Princess Mononoke", "Aliens", "Oldboy", "Once Upon a Time in America", "Citizen Kane", "Das Boot", "Witness for the Prosecution", "North by Northwest", "Vertigo", "Star Wars: Episode VI - Return of the Jedi", "Reservoir Dogs", "M", "Braveheart", "Amélie", "Requiem for a Dream", "A Clockwork Orange", "Taxi Driver", "Lawrence of Arabia", "Like Stars on Earth", "Double Indemnity", "To Kill a Mockingbird", "Eternal Sunshine of the Spotless Mind", "Toy Story 3", "Amadeus", "My Father and My Son", "Full Metal Jacket", "The Sting", "2001: A Space Odyssey", "Singin' in the Rain", "Bicycle Thieves", "Toy Story", "Dangal", "The Kid", "Inglourious Basterds", "Snatch", "Monty Python and the Holy Grail", "Hacksaw Ridge", "3 Idiots", "L.A. Confidential", "For a Few Dollars More", "Scarface", "Rashomon", "The Apartment", "The Hunt", "Good Will Hunting", "Indiana Jones and the Last Crusade", "A Separation", "Metropolis", "Yojimbo", "All About Eve", "Batman Begins", "Up", "Some Like It Hot", "The Treasure of the Sierra Madre", "Unforgiven", "Downfall", "Raging Bull", "The Third Man", "Die Hard", "Children of Heaven", "The Great Escape", "Heat", "Chinatown", "Inside Out", "Pan's Labyrinth", "Ikiru", "My Neighbor Totoro", "On the Waterfront", "Room", "Ran", "The Gold Rush", "The Secret in Their Eyes", "The Bridge on the River Kwai", "Blade Runner", "Mr. Smith Goes to Washington", "The Seventh Seal", "Howl's Moving Castle", "Lock, Stock and Two Smoking Barrels", "Judgment at Nuremberg", "Casino", "The Bandit", "Incendies", "A Beautiful Mind", "A Wednesday", "The General", "The Elephant Man", "Wild Strawberries", "Arrival", "V for Vendetta", "Warrior", "The Wolf of Wall Street", "Manchester by the Sea", "Sunrise", "The Passion of Joan of Arc", "Gran Torino", "Rang De Basanti", "Trainspotting", "Dial M for Murder", "The Big Lebowski", "The Deer Hunter", "Tokyo Story", "Gone with the Wind", "Fargo", "Finding Nemo", "The Sixth Sense", "The Thing", "Hera Pheri", "Cool Hand Luke", "Andaz Apna Apna", "Rebecca", "No Country for Old Men", "How to Train Your Dragon", "Munna Bhai M.B.B.S.", "Sholay", "Kill Bill: Vol. 1", "Into the Wild", "Mary and Max", "Gone Girl", "There Will Be Blood", "Come and See", "It Happened One Night", "Life of Brian", "Rush", "Hotel Rwanda", "Platoon", "Shutter Island", "Network", "The Wages of Fear", "Stand by Me", "Wild Tales", "In the Name of the Father", "Spotlight", "Star Wars: The Force Awakens", "The Nights of Cabiria", "The 400 Blows", "Butch Cassidy and the Sundance Kid", "Mad Max: Fury Road", "The Maltese Falcon", "12 Years a Slave", "Ben-Hur", "The Grand Budapest Hotel", "Persona", "Million Dollar Baby", "Amores Perros", "Jurassic Park", "The Princess Bride", "Hachi: A Dog's Tale", "Memories of Murder", "Stalker", "Nausicaä of the Valley of the Wind", "Drishyam", "The Truman Show", "The Grapes of Wrath", "Before Sunrise", "Touch of Evil", "Annie Hall", "The Message", "Rocky", "Gandhi", "Harry Potter and the Deathly Hallows: Part 2", "The Bourne Ultimatum", "Diabolique", "Donnie Darko", "Monsters, Inc.", "Prisoners", "8½", "The Terminator", "The Wizard of Oz", "Catch Me If You Can", "Groundhog Day", "Twelve Monkeys", "Zootopia", "La Haine", "Barry Lyndon", "Jaws", "The Best Years of Our Lives", "Infernal Affairs", "Udaan", "The Battle of Algiers", "Strangers on a Train", "Dog Day Afternoon", "Sin City", "Kind Hearts and Coronets", "Gangs of Wasseypur", "The Help"],
                callbacks        : {
                    add    : console.log,  // callback when adding a tag
                    remove : console.log   // callback when removing a tag
            }
    });
    </script>

[yairEO]

did you install Tagify? what version are you using? Please add a demo page for me to examine. There was a link it when you opened this issue. without this i cannot help:

React issue template: https://codesandbox.io/s/tagify-react-issue-template-4ub1r?file=/src/index.js

clone it, change it, and post here the link please

[sxshateri]

did you install Tagify? what version are you using? Please add a demo page for me to examine. There was a link it when you opened this issue. without this i cannot help:

React issue template: https://codesandbox.io/s/tagify-react-issue-template-4ub1r?file=/src/index.js

clone it, change it, and post here the link please

yes i installed Tagify using NPM. and it was the latest version available. I'm not sure how to recreate the issue since its an entire Laravel project and I'm not able to share it for security reasons.

[yairEO]

The message:

'Tagify' is declared but its value is never read

You can safely ignore this or simply write new Tagify instead of tagify = new Tagify without creating a variable for it.

I don't know how can Tagify is not defined if you imported it after installing.
did you import Tagify in the file?

[sxshateri]

i imported it using import Tagify from '@yaireo/tagify'; in my JS bundle file then used the following sample in my actual webpage:

<script>
        var input = document.querySelector('textarea[name=webskills]'),
            tagify = new Tagify(input, {
                enforceWhitelist : true,
                delimiters       : null,
                whitelist        : ["The Shawshank Redemption", "The Godfather", "The Godfather: Part II", "The Dark Knight", "12 Angry Men", "Schindler's List", "Pulp Fiction",],
                callbacks        : {
                    add    : console.log,  // callback when adding a tag
                    remove : console.log   // callback when removing a tag
                }
            });
    </script>

but its not working. i get the Uncaught ReferenceError: Tagify is not defined in the console and the 'Tagify' is declared but its value is never read in my bundle file.

is there anything else that missed?

[yairEO]

Which bundler are you using? Webpack? Parcel? Rollup?

[sxshateri]

I'm using Laravel Mix which is technically the same as Webpack but just simpler. It uses Webpack in the background.

[sxshateri]

is this any help?

module "c:/laragon/www/codersCast/node_modules/@yaireo/tagify/dist/tagify.min"
'Tagify' is declared but its value is never read.ts(6133)
Could not find a declaration file for module '@yaireo/tagify'. 'c:/laragon/www/codersCast/node_modules/@yaireo/tagify/dist/tagify.min.js' implicitly has an 'any' type.
  Try `npm install @types/yaireo__tagify` if it exists or add a new declaration (.d.ts) file containing `declare module '@yaireo/tagify';`ts(7016)

[yairEO]

I have no idea, you need to re-create a simplified version in codesandbox.io so I could examine.

Tagify is working fine, perhaps there is something special in Laravel which you need to configure in order to import things from node_modules folder.

---

As you can see, importing & using tagify works as expected: https://codesandbox.io/s/simple-tagify-setup-6pfi2?file=/src/index.js

[abhinavverma]

@sxshateri if you are using laravel mix, in app.js try adding like this :

const Tagify = window.Tagify = require('@yaireo/tagify');

this should work.

[TriJoe]

Also having the same issue in Laravel 9 which uses Vite instead of mix.

Tagify is being successfully imported, is included in the page, but

        var inputElement = document.querySelector('input')
        new Tagify(inputElement)

results in:

bulk:28 Uncaught ReferenceError: Tagify is not defined

[yairEO]

Tagify is being successfully imported

But your error says: "Tagify is not defined"

This means it isn't imported properly. Check carefully if it is really being imported.

[TriJoe]

Well it is, but Vite breaks it when using nom run build. Unfortunately not been able to figure out why this is happening. I created a stackoverflow post about it with code examples here:

https://stackoverflow.com/questions/74786903/laravel-9-with-vite-breaks-a-js-file-on-npm-run-build

So far no answers, I will try to speak to vite/laracasts to see what they think it happening.