Any Parcel Equivalent to Webpack's imports-loader?

[uglycoyote]

❔ Question

Is there an equivalent to Webpack's imports-loader? Specifically, I seem to need the functionality described by the sentence in their docs: "This is useful for third-party modules that rely on global variables"

🔦 Context

I'm trying to use Parcel with Typescript and Three.js. Three.js includes some auxilliary classes which are not part of their "core library", i.e. when I do

import * as THREE from 'three';

I do not get the THREE.ObjLoader. The Typescript type definitions describe the THREE.ObjLoader so I do not get a Typescript error from my line of code:

var loader = new THREE.OBJLoader( manager );

However it results in a runtime failure saying that

Uncaught TypeError: THREE.OBJLoader is not a constructor

I'm basing my code on the Three.js loading sample here, which does not use imports, instead using plain old HTML script tags:

		<script src="../build/three.js"></script>
		<script src="js/loaders/OBJLoader.js"></script>

this js/loaders/OBJLoader.js is present in the three repo but is not part of their core three.js bundle.

I attempted to mimic what they were doing using imports:

import * as THREE from 'three';
import 'three/examples/js/loaders/OBJLoader.js';

However this results in the runtime failure:

Uncaught ReferenceError: THREE is not defined
    at Object.parcelRequire.../node_modules/three/examples/js/loaders/OBJLoader.js (OBJLoader.js:5)

because the OBJLoader.js file indeed relies on the global variable THREE being defined, at the top of the file, they have:

THREE.OBJLoader = ( function () {
...

Looking at this post on stack overflow, I see an answer recommending using the webpack import-loader in the following solution:

const THREE = require('three');

import {
  OBJLoader,
  MTLLoader
} from 'three';

require('imports-loader?THREE=three!three/examples/js/loaders/OBJLoader.js');
require('imports-loader?THREE=three!three/examples/js/loaders/MTLLoader.js');

Essentially this looks like a way of requireing in another file but providing the THREE global variable from the requirer to the requiree. That seems like exactly what I need, but I don't really want to have to switch to Webpack to use this technique.

🌍 Your Environment

Software	Version(s)
Parcel	1.10.3
Node	8.1.2
npm/Yarn	npm 6.4.1
Operating System	Windows 10

[mischnic]

I think #144 fits your situation exactly

[uglycoyote]

Some people over at #144 were talking about similar things, but I could not find a solution there.

[devinrhode2]

I am trying to use parcel on a webpack project, and am hitting this issue: Cannot resolve dependency 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'
My import statement compiles to:

require("imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js");

Fortunately someone made a snapsvg-cjs, I would think most situations libraries should just be changed to properly export variables. (It's not hard ftr)

[uglycoyote]

Sure... I'll close it.... I'm not trying to solve the problem anymore, and to my recollection I never found a solution, but I think that the threejs people have moved their codebase over to work better with bundlers so the question probably isn't relevant anymore even if I were still working on this.