title: TypeScript ES dynamic `import()`
body: <p>While using the new TypeScript feature, so called <a href="https://github.com/Microsoft/TypeScript/pull/14774" rel="noreferrer">ES Dynamic Imports</a>, I am not able to run the code of my isomorphic app on the server side using <code>ts-node</code>.</p>
  
  <p>It seems like the error does not occur when using the webpack module loader which transpiles the code in it's own way and running resulting files in a browser.</p>
  
  <p>The error which I've got:</p>
  
  <pre><code>case 0: return [4 /*yield*/, import("./component/main")];
                               ^^^^^^
  SyntaxError: Unexpected token import
  </code></pre>
  
  <p>Usually TypeScript transpiles the <code>import</code> expression to something like that: <code>Promise.resolve(require("./component/main"))</code>, but I can't see it there.</p>
  
  <p>How to fix that? Does it have something common with <code>ts-node</code>? Or there is a "polyfill" for <code>node.js</code>?</p>
  
  <p>My <code>tsconfig.json</code> file:</p>
  
  <pre><code>{
    "compilerOptions": {
      "declaration": false,
      "emitDecoratorMetadata": true,
      "allowJs": false,
      "experimentalDecorators": true,
      "importHelpers": true,
      "inlineSourceMap": false,
      "inlineSources": false,
      "lib": [
        "DOM",
        "ES5",
        "ES6",
        "ES7"
      ],
      "listFiles": false,
      "module": "commonjs",
      "noEmitOnError": true,
      "noImplicitAny": true,
      "noImplicitReturns": true,
      "noImplicitThis": true,
      "preserveConstEnums": false,
      "pretty": false,
      "removeComments": false,
      "strict": true,
      "target": "es5"
    }
  }
  </code></pre>
  
  <p>the code:</p>
  
  <pre><code>import * as m from "mithril";
  
  import LayoutComponent from "./component/layout";
  
  const render = (
      layout: m.ComponentTypes&lt;any, any&gt;,
  ) =&gt; ({ tag, attrs }: m.Vnode&lt;any, any&gt;) =&gt; m(layout, attrs, m(tag as any, attrs));
  
  export default {
      "/:path...": {
          onmatch: async (args, path) =&gt; (await import("./component/main")).default,
          render: render(LayoutComponent),
      },
  } as m.RouteDefs;
  </code></pre>