[REGRESSION] Cannot assign to read only property '__esModule' of object

[appsforartists]

TypeScript Version: 2.2.1

Code

// presuming [email protected] is installed
import Link from 'react-router/Link';

Note: Using [email protected] to do bundling

tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "lib": [
      "es2015",
      "es2016",
      "es2017",
      "dom"
    ],
    "importHelpers": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es6"
  }
}

Expected behavior:

Link is imported to the local namespace.

Actual behavior:

Uncaught TypeError: Cannot assign to read only property '__esModule' of object '#<Object>'
    at Object.<anonymous> (Link.js:3)

in Chrome 56.0.2924.87. Reverting to [email protected] solves the issue.

[mhegazy]

__esModule property is emitted by the compiler in any ES6 module. This tells other transpiles that this module follows the ES6 module semantics and not a CommonJS/AMD module.

Why are you assigning to __esModule property?

[appsforartists]

I'm not - tsc is.

[mhegazy]

Can you share a self contained sample showing the issue?

[appsforartists]

Looks like this might be an incompatibility between [email protected] and Babel. As you can see, Babel is defining __esModule:true in its exports:

• in react-router
• in a web repl

I had surmised that tsc had changed its behavior around __esModule since this is a regression in 2.2, but upon investigating further, I see that __esModule is present in packages that have been built with babel and published to npm.

[appsforartists]

Let me know if this is helpful; otherwise, I can delete it:

https://github.com/material-motion/tsc-reduction

[mhegazy]

What do i need to run to trigger the error?

[appsforartists]

I just pushed a sample page to that repo. Pull the latest and run yarn run start, then open it in Chrome.

[mhegazy]

Looks like your loader is calling the ts compiler on a .js file ("$app/node_modules/react-router/Link.js) that has already been transformed. not sure why though.

[appsforartists]

Sounds like it's mostly a configuration issue, though it's bizarre that it worked and now it doesn't. Did TS2.2 make meaningful changes to __esModule? That's not listed in https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript

[mhegazy]

yes. In TS 2.1 __esModule was only emitted in modules that had a default export, in TS 2.2 __esModule for all modules.

[appsforartists]

@DanielRosenwasser - you were interested in this.

[appsforartists]

@mhegazy @DanielRosenwasser Is this something we can revert?

It used to be safe to run your entire node_modules folder through TypeScript, which meant you could use the same tool (tsc) to translate your whole app to any ES version. This change broke that ability.

ES6 is supported in all major browsers, but developers often still publish in ES5, both out of habit and out of concern for legacy users. There are many negative ramifications:

• simple expressions like generators explode into complex state machines;
• each library might include a different polyfill, which means more code shipped to users to support the same feature;
• translated code may run slower, and developers have no way to opt back-in to the modern version; and most importantly
• some features like Custom Elements don't work correctly when translated.

The web development community would be in a better spot if we had a culture that allowed module authors to publish code in its original format and let application authors be concerned with translating/polyfilling for old browsers. In order to make that shift, it needs to be safe for an application author to run a transpiler on any arbitrary node_modules, which means this change (always injecting __esModule without checking if one has already been set) needs to be reverted.

[mhegazy]

@mhegazy @DanielRosenwasser Is this something we can revert?

No. These changes are done in preparation for node commonjs interop.

which means this change (always injecting __esModule without checking if one has already been set)

do you have an sample package we can look at?

[appsforartists]

I just reposted https://github.com/material-motion/tsc-reduction