What does “… resolves to a non-module entity and cannot be imported using this construct” mean?

by

Why it doesn’t work

import * as MC from './MyClass';

This is ES6/ES2015-style import syntax. The exact meaning of this is “Take the module namespace object loaded from ./MyClass and use it locally as MC“. Notably, the “module namespace object” consists only of a plain object with properties. An ES6 module object cannot be invoked as a function or with new.

To say it again: An ES6 module namespace object cannot be invoked as a function or with new.

The thing you import using * as X from a module is defined to only have properties. In downleveled CommonJS this might not be fully respected, but TypeScript is telling you what the behavior defined by the standard is.

What does work?

You’ll need to use the CommonJS-style import syntax to use this module:

import MC = require('./MyClass');

If you control both modules, you can use export default instead:

MyClass.ts

export default class MyClass {
  constructor() {
  }
}

MyConsumer.ts

import MC from './MyClass';

I’m Sad About This; Rules are Dumb.

It would have been nice to use ES6 import syntax, but now I have to do this import MC = require('./MyClass'); thing? It’s so 2013! Lame! But grief is a normal part of programming. Please jump to stage five in the Kübler-Ross model: Acceptance.

TypeScript here is telling you this doesn’t work, because it doesn’t work. There are hacks (adding a namespace declaration to MyClass is a popular way to pretend this works), and they might work today in your particular downleveling module bundler (e.g. rollup), but this is illusory. There aren’t any ES6 module implementations in the wild yet, but that won’t be true forever.

Picture your future self, trying to run on a neato native ES6 module implementation and finding that you’ve set yourself up for major failure by trying to use ES6 syntax to do something that ES6 explicitly doesn’t do.

I want to take advantage of my non-standard module loader

Maybe you have a module loader that “helpfully” creates default exports when none exist. I mean, people make standards for a reason, but ignoring standards is fun sometimes and we can think that’s a cool thing to do.

Change MyConsumer.ts to:

import A from './a';

And specify the allowSyntheticDefaultImports command-line or tsconfig.json option.

Note that allowSyntheticDefaultImports doesn’t change the runtime behavior of your code at all. It’s just a flag that tells TypeScript that your module loader creates default exports when none exist. It won’t magically make your code work in nodejs when it didn’t before.

More Related Contents:

  1. Typescript: How can I make entries in an ES6 Map based on an object key/value type
  2. How to avoid imports with very long relative paths in Angular 2?
  3. Object destructuring with property names that are not valid variable names
  4. How to use namespaces with import in TypeScript
  5. Typescript: Cannot use import statement outside a module
  6. How excess property check helps?
  7. `export const` vs. `export default` in ES6
  8. What is “not assignable to parameter of type never” error in TypeScript?
  9. Expected 3 type arguments but got 1 but it should infer 2 types
  10. Import class in definition file (*d.ts)
  11. TypeScript union of string and string literals
  12. What does the `is` keyword do in typescript?
  13. ES6 Destructuring and Module imports
  14. Why can I avoid excess property check in typescript just by passing a reference to an object to a function rather than the object in its literal form?
  15. TypeScript: Accept all Object keys that map to a specific type
  16. Typescript interface default values
  17. How to configure custom global interfaces (.d.ts files) for TypeScript?
  18. TypeScript – use correct version of setTimeout (node vs window)
  19. What is the defined execution order of ES6 imports?
  20. Is there an option to make spreading an object strict?
  21. Circular Type References in TypeScript
  22. ‘compile-time’ way to get all property names defined interface
  23. Make overProp function interface with one param
  24. TypeScript: Why can’t I assign a valid field of an object with type { a: “a”, b: “b” }
  25. Absolute paths (baseUrl) gives error: Cannot find module
  26. typescript restrict count of object’s properties
  27. TypeScript keyof returning specific type
  28. Why is never assignable to every type?
  29. Is there an alternative to Partial to accept only fields from another type and nothing else?
  30. What is a TypeScript Map file?

Leave a Comment