I'm a bit clueless as to why I'm getting this error and what could possibly be going wrong? Here's a breakdown of what's happening:

1. I started up an NPM/webpack app
2. Then I imported in three js and three mesh line:

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';

I then started adding in lines and boxes and stuff. 3) This is an error that I keep getting:

WARNING: Multiple instances of Three.js being imported.

4. To debug this I commented out the line of code for Meshline - which does get rid of this issue.
5. So I had a snoop around the MeshLine file and it looks like this:

var THREE = root.THREE || (has_require && require('three'))
  if (!THREE) throw new Error('MeshLine requires three.js')

6. My working theory is that its not multiple versions but multiple different times that its getting imported. and this is happening because I have something as THREE and as three.
7. Is this intuition right? And what do I do to fix it?

EDIT 1:

I also tried to import the files in like so:

import {PerspectiveCamera, AmbientLight, DirectionalLight, WebGLRenderer, Color, Scene, sRGBEncoding} from "three";

But that didn't help either

EDIT 2: Tried the window.THREE = THREE; that didn't work either

Also here is a repo that I have created that replicates this error : https://github.com/range-et/THREE_THREEMESHLINE