jQuery isn't detected on Textillate.js

Question

I got an error message on my React like this:

jQuery is not defined
ReferenceError: jQuery is not defined
    at ./node_modules/textillate/jquery.textillate.js (http://localhost:3000/static/js/bundle.js:56432:4)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:94001:33)
    at fn (http://localhost:3000/static/js/bundle.js:94213:21)
    at ./src/components/javascripts/Textillate.js (http://localhost:3000/static/js/bundle.js:1300:68)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:94001:33)
    at fn (http://localhost:3000/static/js/bundle.js:94213:21)
    at ./src/components/About.jsx (http://localhost:3000/static/js/bundle.js:178:81)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)

Which is kinda weird because I already installed both jQuery and Textillate.js with npm. The code looks like this:

Textillate.js

import $ from 'jquery';
import 'textillate';

const Textillate = () => {
    $('.text').textillate({
        in: {
            effect: 'flash',
            delayScale: 1,
            delay: 25,
            sequence: true
        }
    });
}
export default Textillate;

About.jsx

import Text from './javascripts/Textillate';

const About = () => {
    React.useEffect(() => {
        Text();
    }, []);
    return (
        <div>
           <h1 className="text">
              abcdefg
           </h1>
        </div>
    )
}
export default About;

Does anyone know what caused this?

Does this answer your question? [How to import jquery using ES6 syntax?](https://stackoverflow.com/questions/34338411/how-to-import-jquery-using-es6-syntax) — Fraser, Aug 27 '23 at 15:04
Just to say - if you look at the answer to that question linked it shows how to import as `jQuery` not just `$` - and how to make it jquery available for other scripts. Hope that helps you out - and apologies if it doesn't answer your question - more than happy to help if that doesn't cover it. — Fraser, Aug 27 '23 at 15:06
well actually I'm not trying to use ES6 syntax, but that's the only way to write the code separately. But the most important thing is, I have another js file which also uses jQuery like `import $ from 'jquery';` but it works. — Gxogac, Aug 27 '23 at 15:14
Yes, the issue being that `jquery.textillate.js` is looking for `jQuery` not `$` - so you need to ensure you have jquery defined as the correct variable. — Fraser, Aug 27 '23 at 16:10
I don't even know what variable I have to create and define on the function because the `$` is used only for the `text` class document. This might be ridiculous but I tried to change the `$` to `jQuery` like `import jQuery from 'jquery';` and also modify the `$('.text').textillate({` to `jQuery('.text').textillate({` but it still get the same error. — Gxogac, Aug 27 '23 at 17:01
And you did `window.jQuery = jQuery;` or `window.jQuery = $;` depending on your import? — Fraser, Aug 27 '23 at 21:39
And you are importing/requiring textillate *after* you have declared the jQuery var. e.g. ```import $ from "jquery"; window.jQuery = $; require('textillate');```? — Fraser, Aug 28 '23 at 08:31
wait, whats the diff between `import 'textillate';` and `require('textillate');`? — Gxogac, Aug 28 '23 at 09:36
There are a few differences - but basically `require` can be called anywhere - where as `import` has be at the beginning of the file. — Fraser, Aug 28 '23 at 12:31

score 1 · Accepted Answer · answered Aug 28 '23 at 15:08

So I made a change in the About.jsx which involved a package called textillate-react without using jquery and stuff.

import { Textillate } from 'textillate-react';

const About = () => {
    return (
        <div>
            <h1>
                <Textillate
                    option={{
                        in: {
                            effect: 'flash',
                            delayScale: 1,
                            delay: 7,
                            shuffle: true
                        }
                    }}
                >
                    abcdefg
                </Textillate>
            </h1>
        </div>
    )
}
export default About;

But version nerds (like me) would be unsatisfied with this answer because it injects our document with scripts which are jQuery with version 3.6.0 (not the latest) and another old version of Javascript libraries (Textillate, Lettering, etc.). So I also made an alternative which I was helped by Fraser and could be updated by ncu -u

Textillate.js

import $ from 'jquery';
import 'animate.css';
window.jQuery = $;
require('textillate');
require('letteringjs');

const Textillate = () => {
    $('h1').textillate({
        in: {
            effect: 'animate__animated animate__flash',
            //I can't use flash animation by only 'flash' since I used animate.css 
            //manually, it's based on pure animate.css prefixes and suffixes.
            delayScale: 1,
            delay: 7,
            shuffle: true
        }
    });
}
export default Textillate;

jQuery isn't detected on Textillate.js

1 Answers1