Building a SPFx solution with datatables – Jquery

I apologize in advance for a wall of text question. SPFx is a new requirement mandated from on high and I don’t have any working experience with it at this point.

I created a vanilla SPFx project added to github to make it easier. There are just too many moving parts to try and get them all in the question.

https://github.com/cyberjetx/dtspfx/tree/AddDt

Description of problem:
Trying to make the basic datatable work with zero configuration in SharePoint framework (SPFx) this is new ground for me and it has been mandated from on-high that we will be using SPFx or not on the intranet at all.

I am trying to document the process so that others using dt will have a base to start from or at least be able to see what is needed to to add dt to their SPFxs. This process is started in the readme.md.

in Area51WebPart.ts

import 'datatables.net';

in main.js

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

In config.json I would IDEALLY like to just use the combined file from dataTables cdn. I have also tried npm install --save datatables.net-dt and linked in config as "path": "/node_modules/datatables.net/js/jquery.dataTables.min.js", earning the following:

[17:03:22] Error – [webpack] ‘dist’:
"C:codedtspfxnode_modulesdatatables.netjsjquery.dataTables.min.js"
does not exist. Ensure the path is correct and relative to the project
root.

however, it is indeed there, if I copy and paste the path and open in notepad it’s there.

. . .
  "externals": {
    "jquery": {
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js",
      "globalName": "jQuery"
    }
    ,"datatables.net": {
        "path": "/node_modules/datatables.net/js/jquery.dataTables.min.js",
     // "path": "https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr- 1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.4/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.7/sb-1.3.4/sp-2.0.2/sl-1.4.0/sr-1.1.1/datatables.min.js",
      "globalName": "jQuery",
      "globalDependencies": [
        "jquery"
      ]
    }
  },
. . .