<p dir="auto">I have a code like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var manager = new THREE.LoadingManager, loader = new THREE.ObjectLoader (manager), model;
manager.onLoad = function () {
	console.log (model); // log 2
};
loader.load (
	'......json',
	function (result) { model = result; console.log(result) } // log 1
);"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">manager</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">LoadingManager</span><span class="pl-kos">,</span> <span class="pl-s1">loader</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ObjectLoader</span> <span class="pl-kos">(</span><span class="pl-s1">manager</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">model</span><span class="pl-kos">;</span>
<span class="pl-s1">manager</span><span class="pl-kos">.</span><span class="pl-en">onLoad</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
	<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span> <span class="pl-kos">(</span><span class="pl-s1">model</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// log 2</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-s1">loader</span><span class="pl-kos">.</span><span class="pl-en">load</span> <span class="pl-kos">(</span>
	<span class="pl-s">'......json'</span><span class="pl-kos">,</span>
	<span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">result</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-s1">model</span> <span class="pl-c1">=</span> <span class="pl-s1">result</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">result</span><span class="pl-kos">)</span> <span class="pl-kos">}</span> <span class="pl-c">// log 1</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and log 2 randomly happens before log 1 (logging <code class="notranslate">undefined</code> as a result). This never happened with real loaders, what's going on?</p>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">basically, area lights do not work with npm/node module resolution, see:</p>
<p dir="auto">simplified: <a href="https://codesandbox.io/s/three-fibre-userender-test-rohv5" rel="nofollow">https://codesandbox.io/s/three-fibre-userender-test-rohv5</a></p>
<p dir="auto">raw threejs arealight demo: <a href="https://codesandbox.io/s/dreamy-platform-3jpim" rel="nofollow">https://codesandbox.io/s/dreamy-platform-3jpim</a></p>
<h2 dir="auto">why</h2>
<p dir="auto">all files under examples/jsm pull from <code class="notranslate">../../../build/three.module.js</code> instead of <code class="notranslate">three</code>, which is arguably not correct. it will pull threejs two times in bundling systems that do not follow package.json:module (but "main" instead, which leads to build/three.js). it then creates two separate namespaces. uniforms.init() ends up writing to the wrong one.</p>
<h2 dir="auto">solution</h2>
<p dir="auto">this is how a typical jsm file should look:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {
	ClampToEdgeWrapping,
	DataTexture,
	FloatType,
	LinearFilter,
	NearestFilter,
	RGBAFormat,
	ShaderLib,
	UVMapping,
	UniformsLib
} from &quot;three&quot;;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span>
	<span class="pl-v">ClampToEdgeWrapping</span><span class="pl-kos">,</span>
	<span class="pl-v">DataTexture</span><span class="pl-kos">,</span>
	<span class="pl-v">FloatType</span><span class="pl-kos">,</span>
	<span class="pl-v">LinearFilter</span><span class="pl-kos">,</span>
	<span class="pl-v">NearestFilter</span><span class="pl-kos">,</span>
	<span class="pl-v">RGBAFormat</span><span class="pl-kos">,</span>
	<span class="pl-v">ShaderLib</span><span class="pl-kos">,</span>
	<span class="pl-v">UVMapping</span><span class="pl-kos">,</span>
	<span class="pl-v">UniformsLib</span>
<span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"three"</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">that's how any other library works. i have never seen library that relies on a distro file - this has obvious pitfalls. i understand that this was made to make the html demos work, but imo this is a hack, and it now impacts production usage.</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r107</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> macOS</li>
</ul>