How do you use the ui.frontend module with NPM to add JavaScript libraries to your AEM Site

When I put 

var $  = require( 'jquery' );
var dt = require( 'datatables.net' )();

in to the file src/main/webpack/site/main.ts
and then run the command

 npm run dev

I get the errors

4:5 warning '$' is assigned a value but never used @767515-eslint/no-unused-vars
4:9 error Require statement not part of import statement @767515-eslint/no-var-requires
5:5 warning 'dt' is assigned a value but never used @767515-eslint/no-unused-vars
5:10 error Require statement not part of import statement @767515-eslint/no-var-requires

✖ 4 problems (2 errors, 2 warnings)

I don't get the errors when I put

require( 'jquery' );
require( 'datatables.net' );

or

import "jquery";
import "datatables.net";

and the file src/main/content/jcr_root/apps/<my app>/clientlibs/clientlib-site/js/site.js
does seem to have the datatables.net JavaScript code in it.


But it doesn't seem to used in any of my components that use datatables.net
The client library for the clientlib-site has .content.xml file value

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[frontend.site]"
    dependencies="[frontend.dependencies]"
    cssProcessor="[default:none,min:none]"
    jsProcessor="[default:none,min:none]"
    allowProxy="{Boolean}true"/>

The components that use datatables.net have the clientlib .content.xml file values

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="frontend.components"/>

The client library clientlib-base have the .content.xml file value
 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="[frontend.base]"
    embed="[frontend.components,core.wcm.components.accordion.v1,core.wcm.components.tabs.v1,core.wcm.components.carousel.v1,core.wcm.components.image.v2,core.wcm.components.breadcrumb.v2,core.wcm.components.search.v1,core.wcm.components.form.text.v2,core.wcm.components.pdfviewer.v1,core.wcm.components.commons.datalayer.v1,frontend.grid]"/>