title: 'Uncaught SyntaxError:Cannot use import statement outside a module' when importing fs
body: <p>I am very green when it comes to JS, so I'm sorry if I'm asking a stupid question.
  I tried to import fs using this code in my .js file:</p>
  <pre><code>import fs from 'fs';
  </code></pre>
  <p>and got 'Uncaught SyntaxError:Cannot use import statement outside a module' error in my <strong>browser</strong> console.
  I also tried the 'old' way:</p>
  <pre><code>var fs = require ('fs');
  </code></pre>
  <p>but then got 'Uncaught ReferenceError: require is not defined at &quot;higher_order_functions.js&quot;'.
  Additionally I tried adding type=&quot;module&quot; to html as suggested when reading about similar problem:</p>
  <pre><code>&lt;script type=&quot;module&quot; src = &quot;higher_order_functions.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>But then received 'Uncaught TypeError: Failed to resolve module specifier &quot;fs&quot;. Relative references must start with either &quot;/&quot;, &quot;./&quot;, or &quot;../&quot;.' When I used one of these, then I got 404. And now I'm out of ideas.<br>
  Or is it just that I can't do it in browser?</p>
  <p>higher_order_function.js looks like this:</p>
  <pre><code>import fs from 'fs';
  var output = fs.readFileSync('data_reduce.txt', 'utf8');
  console.log(output);
  </code></pre>
  <p>and .html like this:</p>
  <pre><code>&lt;!DOCTYPE html&gt;    
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;title&gt;Document&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Higher order functions &lt;/h1&gt;
      &lt;script type=&quot;module&quot; src = &quot;higher_order_functions.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>