how to use node module with es6 import syntax in typescript

Question

I have a typescript project which has uses one of our node modules which normally runs in our front-end. We are now looking to use this module in node on our server.

The module uses es6 import syntax import { props } from 'module/file'

When I include a ref in typescript using either of the following methods

import { props } from 'module/file';
var props = require('module/file');

I get the following error from typescript

unexpected token 'import' 
(function (exports, require, module, __filename, __dirname) { import

It's a big job to re-write the module, and I've tried using babel with babel-plugin-dynamic-import-node, as well as SystemJS.

The problem with these systems is that they are all asynchronous, so I can't import the module in the standard fashion, so I would need to do a whole bunch of re-write when we get to the point that I can use import natively in node.js.

I can't be the first person to have this issue, but I can't seem to find a working solution.

--------------- update with set-up -------------

In response to @DanielKhoroshko's response. The original module I am trying to import is normally packaged by webpack in order to use on the front-end. I am now trying to use this same module both server-side and in the front-end (via webpack on the front-end) without re-writing the imports to use require and without running webpack to bundle the js to use on the server.

To be clear, the original module is written in JS, our service which is trying to use this module is written in typescript and transpiled. When the typescript tries to require the old module which uses import, it is at this point that we are running into the issue.

------------------ some progress ---------------------------

I've made some progress by creating a file in my imported module which uses babel in node.js to transpile the es6 code into commonJS modules.

I've done this via

var babel = require("babel-core")

var store = babel.transformFileSync(__dirname + '/store.js', {
    plugins: ["transform-es2015-modules-commonjs"]
});

module.exports = {
    store: store.code
}

I can now get the store in my new node.js project. However, the submodules within the store.js file are not included in the export.

So where in my module, it says import activities from './reducers/activities'; I now get an error Cannot find module './reducers/activities'

How can I get babel to do a deep traversal to include the sub-directories?

If you have client side bundling configured for SystemJS, you can create another bundle for the server side by using --format cjs. Alternately, you could load your server side application with SystemJS. — Aluan Haddad
– Aluan Haddad, Commented Jan 1, 2018 at 0:04
@AluanHaddad thanks, I hadn't seen --format cjs as part of SystemJS, though I did try SystemJS before. The problem I'm experiencing with SystemJS is that the required modules are returned as a promise, which has implications for how we writing modules which are available to both the server and client-side. — pedalpete
– pedalpete, Commented Jan 1, 2018 at 22:00

Daniel Khoroshko · Accepted Answer · 2018-01-02 02:08:10Z

1

unexpected token 'import' means you are running es-modules code in environment that doesn't support import/export commands. If you are writing you code in TypeScript it's important to transpile it first before building for the browser or use ts-node to run it server-side.

If you are using webpack there are loaders ts-loader and awesome-typescript-loader

What is your setup?

To describe the module you would need to create an activities.d.ts file in the same folder where the js-version (I understood it is called activities.js and containers a reducer) resides with the following (approx.):

import { Reducer } from 'redux';

export const activities: Reducer<any>;

edited Jan 2, 2018 at 2:08

answered Dec 31, 2017 at 5:50

Daniel Khoroshko

2,7411 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pedalpete Over a year ago

Thank @Daniel, I've updated the question with the details. The module we are including is written in JS, the requiring code is written in TS. The original module is packaged with webpack, however, we are now attempting to use this on the server, so don't want to package with webpack, and are trying to figure out how to use the package directly.

Daniel Khoroshko Over a year ago

Hi! That's an interesting solution you've come with. Is the error Cannot find module './reducers/activities' produced by typescript or node? Probably the first one, because typescript doesn't understand importing when types don't exist for imported modules. In this case I usually just require them the node style or write typings, which is you create index.d.ts (will update the answer now)

pedalpete Over a year ago

Thanks for your help Daniel, I went in a bit of a different direction as your proposed solution, which may work for others, ended up being a bit of a rabbit whole of updating different things in the included module. I'll post my solution.

pedalpete · Accepted Answer · 2018-01-02 10:18:19Z

@Daniel Khoroshko was right in many ways, I ended up finding @std/esm which lets you import es6 modules and worked find for fetching the included imports as well.

var babel = require('babel-register')({
    presets: ["env"]
});

    require = require('@std/esm')(module);

    var store = require('ayvri-viewer/src/store');

    exports.default = {
        store: store
    }

I had to run babel to get a consistent build from es6 to node compatible es5

Collectives™ on Stack Overflow

how to use node module with es6 import syntax in typescript

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related