How do I "Import" a TypeScript module using StackBlitz editor

If I go into the Stackblitz.com editor and create a new Angular project, it provides some default files, folders, etc.

Under the "Dependencies" area, I want to install shortid. So, I type that into the box and it goes through the motions of loading the correct version. All is well and good at that point.

Then, in the app.component.ts file, it is my understanding that this can be "imported" - but any combination of the following fails with the message "Cannot find module 'shortid'."

import * as sid from 'shortid'; import { generate } from 'shortid'; import "/node_modules/shortid"; import shortid = require("shortid"); 

The following doesn't generate an error, but also does not seem to expose any of the shortid functions.

import 'shortid'; 

Is StackBlitz broken in this regard? Or am I doing something wrong?

3 Answers

Some packages don't have a default export, so you need to:

import * as shortid from 'shortid'; 

Working StackBlitz:

Edit: I mis-read your question. IntelliSense isn't working for me either, but shortid is working as expected.

Closing my application and reopening worked for me.

Just as a note to anyone with this problem or similar problem and ends up on this question; even if Stackblitz complains that it does not recognize a module, it might still work when you run the code. The error message is likely simply a result of a security feature in the browser (in the browser console, you might see something like

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('). 

You can most often ignore this and just run your code