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;
– 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.
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 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. ...
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
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With