Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript ES dynamic `import()`

While using the new TypeScript feature, so called ES Dynamic Imports, I am not able to run the code of my isomorphic app on the server side using ts-node.

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.

The error which I've got:

case 0: return [4 /*yield*/, import("./component/main")];
                             ^^^^^^
SyntaxError: Unexpected token import

Usually TypeScript transpiles the import expression to something like that: Promise.resolve(require("./component/main")), but I can't see it there.

How to fix that? Does it have something common with ts-node? Or there is a "polyfill" for node.js?

My tsconfig.json file:

{
  "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"
  }
}

the code:

import * as m from "mithril";

import LayoutComponent from "./component/layout";

const render = (
    layout: m.ComponentTypes<any, any>,
) => ({ tag, attrs }: m.Vnode<any, any>) => m(layout, attrs, m(tag as any, attrs));

export default {
    "/:path...": {
        onmatch: async (args, path) => (await import("./component/main")).default,
        render: render(LayoutComponent),
    },
} as m.RouteDefs;
like image 259
Roomy Avatar asked Jul 29 '17 15:07

Roomy


People also ask

Is dynamic import supported in typescript?

– Dan Dascalescu Apr 3, 2020 at 0:17 Add a comment | 2 Answers 2 ActiveOldestScore 52 ES proposal dynamic importis supported since TypeScript 2.4. Document is here. importfunction is asynchronous and returns a Promise.

Are imported Module classes not visible in typescript?

TypeScript: imported module classes are not visible 2461 How do I import an SQL file using the command line in MySQL? 9 getter/setter on a module in TypeScript 5 tsc compile AMD module with specified module id

How to dynamically import ECMAScript Modules?

How to Dynamically Import ECMAScript Modules 1 Dynamic import of modules. It returns a promise and starts an asynchronous task to load the module. ... 2 Importing components. Let’s consider the following module, named namedConcat.js: namedConcat performs a named export of the concat function. 3 When to use dynamic import. ... 4 Conclusion. ...

How do I load modules dynamically in es?

But sometimes you'd like to save a bit of the client's bandwidth and load modules dynamically. You can import modules dynamically if you use import as a function — import (pathToModule) — a feature available starting ES2020. Let's see how dynamic import works, and when it's useful. 1. Dynamic import of modules


1 Answers

This is a bug in the Typescript Compiler which will be fixed in 2.5.

Exporting a default object with a function that imports a file will not compile the import statement into a require statement in Typescript 2.4.x.

For example, while this:

export const sudo = { run() { return import('./test3'); } }

Will compile to this:

exports.sudo = { run: function () { return Promise.resolve().then(function () { return require('./test3'); }); } };

This:

export default { run() { return import('./test3'); } }

Compiles into this:

exports.default = { run: function () { return import('./test3'); } };

Which is obviously wrong. A temporary solution would be this:

export const sudo = { run() { return import('./test3'); } }

export default sudo;

Which compiles (correctly) into this:

exports.sudo = { run: function () { return Promise.resolve().then(function () { return require('./test3'); }); } };
exports.default = exports.sudo;
like image 97
Michael Fedora Avatar answered Oct 16 '22 18:10

Michael Fedora