@mhegazy and @RyanCavanaugh

Thanks @johnnyreilly!

This isn't an optimization as much as it is us trying to give the user more control over this. If we didn't perform this step, there'd be no way to say "I only need the typings from this import." On the other hand, with the current behavior, you can always force an import by

• Adding an extra blind import:

  import * as React from "react";
  import "react";

• Using an imported entity as an expression (like in the following statement expression):

  import * as React from "react";
  React;

Actually, would you mind shortening your fix to one of the above forms just because it's a bit cleaner?

Done. I had to use approach 2 as approach 1 didn't work. Any idea why that might be?

That's weird - approach 1 didn't work?

I pulled down the changes and tried using an import "react"; and just running tsc from `src.. The compiled output maintained the import. If I'm not mistaken, this sounds like a potential problem with the other tools. A sanity check from @mhegazy and @RyanCavanaugh would help.

Curious - ts-loader is doing the TSC invoking so @jbrantly might have a view.

Try approach 1 on the repo and run npm run serve to see the issue

Just one comment, using import "react" instead of the use as value.

@johnnyreilly I've never run into the issue I don't think because my JSX is always within a React component (so extending React.Component).

I wonder if the lack of jsx compiler option in the test tsconfig.json has anything to do with it. Per @RyanCavanaugh here when using jsx: "react" any JSX is supposed to act as if React was referenced. I can understand why that might not be the case for jsx: "preserve".

Hi @mhegazy

Just one comment, using import "react" instead of the use as value.

I did try this but it didn't work I'm afraid. Please feel free to prove me wrong!

I've repro'd the issue on my side as well, it's just that somewhere in the pipeline, the import "react" isn't getting respected.

Import can't get no respect? That makes Aretha sad 😄

The difference between React; and import "react" can also be seen in the playground example given earlier by @johnnyreilly. If you use React; then React is both added to the list of dependencies AND injected into the module factory function. If you use import "react"; then it's added to the list of dependencies but not injected.

This actually makes sense to me. When I think of import "react" I'm thinking of importing a module for a side-effect, not somehow saying that a completely different imported variable (albeit from the same module) is somehow "used".

I don't think there is an actual bug here, although it's a bit of a weird situation. This is handled correctly with --jsx react because TS knows that the JSX is being compiled to React.createElement expressions so it knows to keep the imported variable. With --jsx preserve there's no guarantee that React is being used at all.

I think the correct course of action is to either use React; or just use --jsx react.

👍

thanks!

Pleasure. When Babel fix the sourcemaps in v6 I intend to upgrade the sample to use Babel 6 instead of v5. Just waiting on a PR to be merged here:

babel/babel#3108