Problem with migrating from React build on CRA to React using Vite

Question

Like the title, I encountered an error when I build same React project but different bundler pack. This time I created React using Vite

Textillate

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

declare global {
    interface Window {
        jQuery: any;
    }
}
const Textillate = () => {
    window.jQuery("#about").textillate({
        in: {
            effect: "animate__animated animate__flash",
            delay: 7,
            shuffle: true
        }
    });
};
export default Textillate;

import Text from '../utils/Textillate';
const About = () => {
    const canvasRef = React.useRef<HTMLCanvasElement>(null);
    const [ref, inView] = useInView({
        triggerOnce: true,
        threshold: .1
    });
    React.useEffect(() => {
        if (inView) {
           Text();
        }
    }, [inView]);

The requested module '/node_modules/.vite/deps/letteringjs.js?v=d0ba45f7' does not provide an export named 'default' (at Textillate.ts:1:8)

Not only using Textillate, I also have package slick-carousel and particle-js which somewhat this Vite doesnt support CommonJS module (like using require())

Slick

import $ from 'jquery';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
window.jQuery = $;
require('slick-carousel');

declare global {
    interface Window {
        jQuery: any;
    }
}
const Slick = () => {
    window.jQuery("#projects").slick({
        infinite: true,
        speed: 500,
        autoplay: true,
        autoplaySpeed: 1500,
        fade: true,
        cssEase: 'linear'
    });
}
export default Slick;

import Slk from '../utils/Slick';

const Projects: React.FC = () => {
    const openLink = (link: string) => window.open(link, "_blank", "noopener noreferrer");
    React.useEffect(() => Slk(), []);

Cannot read properties of undefined (reading '__esModule') at Slick.ts:1:185

particle-js

declare global {
    interface Window {
        pJS: any;
    }
}
const Particles = {
    "particles": {
        "number": {
            "value": 50,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {
.....
},
    "retina_detect": true
}
export default Particles;

import React from 'react';
import 'particles.js';
import Prtcl from '../utils/Particles';
import { useInView } from 'react-intersection-observer';

const Contact: React.FC = () => {
    const [ref, inView] = useInView({
        triggerOnce: true,
        threshold: .5
    });
    React.useEffect(() => {
        if (inView) {
            const particlesJS = window.pJS;
            particlesJS("particles-js", Prtcl);
        }
    }, [inView]);

particlesJS is not a function

I already tried to use vite-plugin-require but its not work

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import vitePluginRequire from "vite-plugin-require";

export default defineConfig({
  plugins: [react(), vitePluginRequire()]
})

Answer 1

I could help the Textillate, Lettering, and Slick. I cant help the Particles.js one.

So try to copy those CommonJS package to your own project and import it using ESModule Syntax (i.e import 'textillate.js' import 'lettering.js)

Now, there's a new error... yeay (jk)

Which is appear like (jquery is not defined or whatever)

Simply put:

import jQuery from 'jquery'

to both of your library.

For the Slick, try to install the @types package (idk what its called) but to install it looks like this

npm i -D @types/slick-carousel