Loading CannonDebugRenderer and other Three Utils via NPM/Webpack Transpilation

[jackfrye]

Hello.
I am trying to use the Three.js debug renderer to draw meshes of cannon bodies. I was looking at https://github.com/schteppe/cannon.js/blob/master/tools/threejs/example.html

A number of dependencies appear to be loaded in the HTML before the example script is run

    <script src="../../libs/Three.js"></script>
    <script src="../../libs/Detector.js"></script>
    <script src="../../libs/TrackballControls.js"></script>
    <script src="../../build/cannon.js"></script>
    <script src="CannonDebugRenderer.js"></script>

I have two questions.

1. To use Three.js with this library, do I have to load it through the libs in this repository, or can I install it via NPM and import it the "traditional" way then use webpack to put it all together?

import * as THREE from 'three';
import * as CANNON from 'cannon';
import CannonDebugRenderer from '../node_modules/cannon/tools/threejs/CannonDebugRenderer.js'

2. I have not been having luck with the above. If I I am missing something small, and able to import Three.js as shown above (not from Cannon lib), how can I import/use CannonDebugRenderer? The above does not seem to work even though webpack is able to find all modules/classes and compile without warnings.
   Specifically, I see the line
   cannonDebugRenderer = new THREE.CannonDebugRenderer(scene, world);
   but if I am importing Three.js from node_modules, ie https://github.com/mrdoob/three.js/tree/dev/build , then I don't think the import includes the CannonDebugRenderer. Does this necessitate import from Cannon lib?

Disclaimer: I am pretty new to JS language/workflows, so I apologize if these are obvious questions.

[marcofugaro]

The CannonDebugRenderer.js is not setup to handle esmodule imports, you can use cannon-es-debugger instead. Instructions are in the README.