Ember-cli-typescript: Cannot find module 'npm:xxx'

[wooandoo]

Hi,

I want to use ember-cli-typescript with ember-browserify. With a JS file, I can import a module like this:

import {
  reduce
} from 'npm:ramda';

But, when I transformed this .js file in .ts, I have this error:

Cannot find module 'npm:ramda'

Is there a solution?

Frédéric

[wooandoo]

I found a solution without browserify, but I prefer a solution with browserify (to avoid the next shims) ;-) :

npm install --save @types/ramda
ember install ember-cli-import-from-npm

in ember-cli-build.js:

app.import(app.nodeModulesDirectory + '/ramda/dist/ramda.js');
app.import('vendor/shims/ramda.js');

and in vendor/shims/ramda.js:

(function() {
  var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

  function vendorModule() {
    'use strict';
    return _extends({}, { 'default': R}, R);
  }

  define('ramda', [], vendorModule);
})();

an idea?

[chriskrycho]

@wooandoo just wanted you to know as I'm picking up steam on working on this that I've seen this. I'm not yet sure what the answer here will be, and it'll be a bit before I have time to look at it, but it's on my radar and I will get back to it!

[wooandoo]

hello,
have you an alternative to load NPM modules from typescript file (without browerify?)
how can I help?

Frédéric

[chriskrycho]

You can use ember-browserify with a small shim. For example (drawing on the notes I wrote up for #78), you could import the ts-mockito module using ember-browserify in parallel with TypeScript by creating a TypeScript shim module named npm:ts-mockito which simply imports and re-exports the ts-mockito exports. Something like this should work (I haven’t tested it, though!):

declare module 'npm:ts-mockito' {
  import mockito from 'ts-mockito';
  export default mockito;
}

[krisselden]

You can also add a paths to your tsconfig to specify a mapping to a different location.

"paths": { "npm:ts-mockito" : ["./node_modules/ts-mockito"] }

[chriskrycho]

Yes! I ran into that solution earlier today and was just coming here to suggest it. That’s the solution I’ll be recommending going forward.