Invariant can't be imported in TypeScript under jest vs metro-bundler/packager (in react-native)

Using invariant imported with the following two patterns fails opposite depending on how we run the build (either as unit-tests under jest, or as a react-native view on android).

import * as invariant from "invariant";

import invariant from "invariant";

Swapping the import from one to the other enables/disables using invariant in the opposite target.

[bradleyayers]

Prior to TypeScript 2.7, CommonJS modules that exported a function as the module (i.e. module.exports = function () { … }) could not be imported as an ES module. This meant that it was not possible to import this type of modules (“callable CommonJS module”) using ES module import syntax (e.g. import foo from 'foo' or import * as foo from 'foo').

This changed in TypeScript 2.7 with the introduction of --esModuleInterop that enables TypeScript modules to import “callable CommonJS modules” using ES module default import syntax.

This boils down to:

• If you’re using TS 2.7 or newer with --esModuleInterop this module can be imported via import invariant from 'invariant';
• Otherwise you must use the import invariant = require('invariant'); syntax.

[andrezsanchez]

I had to use allowSyntheticDefaultImports: true in my config for import invariant from 'invariant' to work (with TS version 2.7.2).