Uncaught ReferenceError: jQuery is not defined

xiiiiichen

Link to test case: There is no link to test case
Debugger code (debug.datatables.net):
Error messages shown: Uncaught ReferenceError: jQuery is not defined
Description of problem: I'm implementing datatables in my React.js project. Here is my code snippet in useEffect:
`useEffect(() => {

    const script1 = document.createElement('script')
    // script1.defer = true
    script1.defer = true;
    script1.src = "https://code.jquery.com/jquery-3.6.3.js";

    document.head.appendChild(script1);


    const script2 = document.createElement('script')
    // script2.defer = true
    script2.src = "https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js";

    const script3 = document.createElement('script')
    // script3.defer = true
    script3.src = "https://cdn.datatables.net/1.13.2/js/dataTables.bootstrap5.min.js";

    const css1 = document.createElement('link')
    css1.rel = 'stylesheet'
    css1.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css";

    const css2 = document.createElement('link')
    css2.rel = 'stylesheet'
    css2.href = "https://cdn.datatables.net/1.13.2/css/dataTables.bootstrap5.min.css";


    document.head.appendChild(script2);
    document.head.appendChild(script3);
    document.head.appendChild(css1);
    document.head.appendChild(css2);

    $(document).ready(function () {
        $('#example').DataTable();
    });

    fetchCustomers()
    initialUpdate()
    console.log(updateSuccess)

    return () => {
        document.head.removeChild(script1);
        document.head.removeChild(script2);
        document.head.removeChild(script3);
        document.head.removeChild(css1);
        document.head.removeChild(css2);
    }
}, [])`

I can view the script rendered in the head and at the top of other scripts in the inspection mode of my browser. And I can also view the jQuery package in the sources

colin

I'm not familiar with React, but

script1.defer

seems a bit suspicious. jQuery is a dependency of DataTables, so that needs to be loaded first, deferring it would cause issues. Have you tried it with that line commented out?

Colin