使用NPM库不是CDN时，DataTables colVis不再起作用

如何解决使用NPM库不是CDN时，DataTables colVis不再起作用

我最近被迫将回购转移到一个内部系统，该系统不再允许我提取自己的任何标签，即，迫使我使用NPM库来使所有数据表正常工作。我现在遇到的问题是我能够让DataTables显示出来，但colVis按钮不再起作用。我已经尝试了很多帖子，但是仍然空着.......我的猜测是我某种程度上需要通过导入来引入CSS（也许吗？），或者我可能没有正确引入模块？我已经包含了我的CSS文件和一个示例，试图在其中插入colvis ... Ive的注释部分也没有运气。

非常感谢您的帮助！

CSS：

@import 'bootstrap';

/* This line controls the navbar BUTTON color!!!! */
.nav-pills .nav-link.active {
    background-color: #1ac47d;
}

#banner {
    background-color: #1ac47d;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
// more below this obviously

组件：

import React,{ useEffect } from 'react';

import { useSelector,useDispatch } from 'react-redux';
import {
    getSalesOverview,getSalesRepOverview,getSalesPopulationOverview,getSalesRepPopulationOverview,} from '../State/actionCreators';
import { parseData } from './utils';
import { LoadingSpinner } from './LoadingSpinner';

const $ = require('jquery');
// require('datatables.net-bs4');
// require('datatables.net-bs4')();
// require('datatables.net-buttons-bs4');
// require('datatables.net-buttons/js/buttons.colVis.js');
// require('datatables.net-buttons/js/buttons.html5.js');
// require('datatables.net-colreorder-bs4');
// require('datatables.net-fixedcolumns-bs4');
// require('datatables.net-fixedheader-bs4')();
// require('datatables.net-responsive-bs4');
// require('datatables.net-buttons/js/buttons.print.js');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
require('datatables.net-buttons/js/buttons.colVis.js');
require('datatables.net-buttons/js/buttons.html5.js');
require('datatables.net-buttons/js/buttons.print.js');
require('datatables.net-colreorder-bs4');
require('datatables.net-fixedcolumns-bs4');
require('datatables.net-fixedheader-bs4');
require('datatables.net-rowreorder-bs4');

export const SalesTodayOverview = (props) => {
    const dispatch = useDispatch();
    const user = useSelector((state) => state.currentUser);
    const view = useSelector((state) => state.View);
    const overview = useSelector((state) => state.SalesOverview);
    const salesRepOverview = useSelector((state) => state.SalesOverview).SalesRepOverview;
    const salesPopulationOverview = useSelector((state) => state.SalesOverview)
        .SalesPopulationOverview;
    const salesRepPopulationOverview = useSelector((state) => state.SalesOverview)
        .SalesRepPopulationOverview;
    // initial page landing pulls data needed
    useEffect(() => {
        // dispatch(getSalesOverview(user));

        dispatch(getSalesRepOverview(user,view));

        dispatch(getSalesPopulationOverview(user,view));

        dispatch(getSalesRepPopulationOverview(user,view));

        const spinner = document.getElementById('spinner');
        spinner.style.display = 'none';
    },[]);

    useEffect(() => {
        if (salesRepOverview.length) {
            const SalesOverviewData = parseData(salesRepOverview,'Sales-Rep-Overview');

            if (document.getElementById('Sales-Rep-Overview').innerHTML !== '') {
                $('#Sales-Rep-Overview')
                    .DataTable()
                    .clear();
                $('#Sales-Rep-Overview')
                    .DataTable()
                    .destroy();
            }

            $('#Sales-Rep-Overview').DataTable({
                columns: SalesOverviewData.headers,data: SalesOverviewData.data,dom:
                    '<"row"<"col-sm-4"B><"col-sm-4 tabletitle"><"col-sm-4"f>>t<"row"<"col-sm-4"i><"col-sm-8"p>><"row"<"col-sm-12"l>>',deferRender: true,colReorder: true,buttons: ['csv','colvis'],lengthMenu: [
                    [10,50,100,-1],[10,'All'],],});
        }
    },[salesRepOverview]);