title: How to load BigInteger.min.js into browser so that Data.BigInt finds it?
body: <p>I have the following PureScript program that prints a <code>BigInt</code> to the log:</p>
  <pre><code>module Main where
  
  import Prelude
  import Effect
  import Effect.Console
  
  import Data.Integral (fromIntegral)
  import Data.BigInt
  
  main :: Effect Unit
  main = log $ show (fromIntegral 0x42 :: BigInt)
  </code></pre>
  <p>I would like to use it from the browser. So I made the following HTML file:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;script src=&quot;index.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The contents of <code>index.js</code> is:</p>
  <pre><code>import * as Main from '../output/Main/index';
  
  console.log(&quot;Before&quot;);
  Main.main();
  console.log(&quot;After&quot;);
  </code></pre>
  <p>This fails because <code>Data.BigInt</code> uses FFI to a Javascript module called <code>big-integer</code>:</p>
  <blockquote>
  <p>Uncaught <code>TypeError</code>: Failed to resolve module specifier <code>&quot;big-integer&quot;</code>.
  Relative references must start with either <code>&quot;/&quot;</code>, <code>&quot;./&quot;</code>, or <code>&quot;../&quot;</code>.</p>
  </blockquote>
  <p><strong>How do I load <code>BigInteger.min.js</code> into the <code>&quot;big-integer&quot;</code> module specifier?</strong></p>
  <h1>What I've tried so far</h1>
  <p>I tried loading <code>BigInteger.min.js</code> by importing it manually in <code>index.js</code>:</p>
  <pre><code>import * as Main from '../output/Main/index';
  import * as BigInteger from './BigInteger.min.js';
  
  console.log(&quot;Before&quot;);
  Main.main();
  console.log(&quot;After&quot;);
  </code></pre>
  <p>But the problem here is that I can't import it as <code>big-integer</code>, only <code>BigInteger</code>, because the former is not lexically valid.</p>
  <p>I also tried an unqualified import:</p>
  <pre><code>import {bigInt} from './BigInteger.min.js';
  </code></pre>
  <p>but that doesn't work either (same error about missing <code>&quot;big-integer&quot;</code> module).</p>
  <p>I've also tired loading <code>BigInteger.minjs</code> as a JS source file directly:</p>
  <pre><code>&lt;body&gt;
    &lt;script src=&quot;BigInteger.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;index.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>But still, same problem.</p>
  <p>I've also tried adding an import map to my HTML file:</p>
  <pre><code>&lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
    &lt;script type=&quot;importmap&quot;&gt;
      {
          &quot;imports&quot;: {
              &quot;big-integer&quot;: &quot;./BigInteger.min.js&quot;
          }
      }
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  <p>This then fails with:</p>
  <blockquote>
  <p>Uncaught <code>SyntaxError</code>:
  The requested module <code>'big-integer'</code> does not provide an export named <code>'default'</code>
  (at <code>foreign.js</code>:3:8)</p>
  </blockquote>