title: Typescript SyntaxError: Cannot use import statement outside a module (side file containing functions)
body: <p>I am creating a minecraft bot using <a href="https://github.com/PrismarineJS/mineflayer/" rel="nofollow noreferrer">mineflayer</a> library. After a bit of work I decided to make code readable and reusable (<a href="https://i.stack.imgur.com/znX0E.png" rel="nofollow noreferrer">image of file organisation</a>) and also start using typescript. I  have read a lot of stack threads and other articles as this problem is quite popular. However, after trying all of it the problem still persists.</p>
  <h1>Edit, important change:</h1>
  <p>I have tried compiling it with <code>tsc bot.ts --resolveJsonModule</code> and then <code>node bot.js</code>. It turns out it works just fine, so now the problem narrows down to configuring <a href="https://www.jetbrains.com/webstorm/" rel="nofollow noreferrer">WebStorm</a> running options.</p>
  <h3>Here is what I have already done</h3>
  <ul>
  <li>package.json <code>&quot;type&quot;: &quot;module</code> -&gt; <code>TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension &quot;.ts&quot; for</code> <em>path</em></li>
  <li>tsconfig.json <strong>has</strong> <code>&quot;esModuleInterop&quot;: true</code></li>
  <li>use <code>const util = require('./utils/util')</code> and use <code>util.function()</code> -&gt; same error as in <em>1st</em> step</li>
  </ul>
  <h3>Running whole code</h3>
  <p>As I am using WebStorm, this is what I have in running options: <a href="https://i.stack.imgur.com/PiGoh.png" rel="nofollow noreferrer">image</a> (just to clarify that I don't run code from terminal)</p>
  <h3>Recreating problem in simplified environment</h3>
  <p><em>bot.ts</em></p>
  <pre><code>import {util} from &quot;./utils/util&quot; // error is thrown right away, so other lines are irrelevant I guess
  
  const mineflayer = require('mineflayer')
  const bot = mineflayer.createBot()
  </code></pre>
  <p><em>util.ts</em></p>
  <pre><code>import * as config from &quot;../config/config_main.json&quot;
  export module util {
      export function sleep (time) {
          return new Promise((resolve) =&gt; setTimeout(resolve, time));
      }
  
      export function random(list) {
          if (list[0] === list[1]) return list[0];
          return Math.floor(Math.random() * (list[1] - list[0]))  + list[0];
      }
  }
  </code></pre>
  <p><em>config_main.json</em></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;bot&quot;: {
      &quot;username&quot;: &quot;username&quot;,
      &quot;password&quot;: &quot;password&quot;
    }
  }
  </code></pre>
  <p><em>tsconfig.json</em></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es2016&quot;,
      &quot;module&quot;: &quot;commonjs&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;esModuleInterop&quot;: true,                             
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;strict&quot;: false,                                      
      &quot;skipLibCheck&quot;: true                           
    }
  }
  
  </code></pre>
  <p><em>package.json</em></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;type&quot;: &quot;module&quot;,
    &quot;name&quot;: &quot;mcbot&quot;,
    &quot;main&quot;: &quot;bot.js&quot;,
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;None&quot;
    }
  }
  </code></pre>
  <h3>Related threads</h3>
  <ul>
  <li><a href="https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module">SyntaxError: Cannot use import statement outside a module</a> - <code>&quot;type&quot;: &quot;module&quot;</code> doesn't work as well as changing extensions to <code>.mjs</code> isn't viable as I am using typescript</li>
  <li><a href="https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import">&quot;Uncaught SyntaxError: Cannot use import statement outside a module&quot; when importing ECMAScript 6</a> - from here tried</li>
  </ul>
  <pre><code>import { parse } from 'node-html-parser';
  parse = require('node-html-parser');
  </code></pre>
  <p>but the IDE gives me <code>TS2632: Cannot assign to 'util' because it is an import.</code> error.</p>