title: Typescript and React outputting require
body: <p>I'm trying to get Typescript and React working together in MVC Core</p>
  
  <p>The problem is the requirement for the following lines in my .tsx file:</p>
  
  <pre><code>import React = require('react');
  import ReactDOM = require('react-dom');
  </code></pre>
  
  <p>These lines pass through both compilers becoming the following in the JS for browser processing:</p>
  
  <pre><code>var React = require('react');
  var ReactDOM = require('react-dom');
  </code></pre>
  
  <p>Obviously, the browser cannot run these lines, because "require" is not a function in the browser</p>
  
  <p>And yes, I can verify that both Typescript and React have processed the file.</p>
  
  <p>Elsewhere on the site, it is suggested to use a global import, however this is a bad idea (it even says so in that post), I could also fix this by creating an empty function called "require", but that would also be bad practice</p>
  
  <p>That this situation has arisen at all I find surprising, I thought the whole point of TypeScript was to take better code that the browser doesn't understand and transform it into equivalent code that it would. Thus, that TypeScript has allowed these lines to just pass through is baffling to me.</p>
  
  <p>I have tried using the module directive in tsconfig.json to produce the required output, however there doesn't seem to be a browser compatible option</p>
  
  <p>Is there a way to get React's babel compiler to eat the require functions? Has Typescript left them in because it expects React to do something with them?</p>
  
  <p>EDIT: My question is different from the one suggested as a duplicate because it asks about module() and not import.</p>
  
  <p>Though I suspect the answers to the 2 questions may be the same, suggestions on the accepted answer such as "just us a reference" don't work and although use of an external module loader should solve the issue, it's a broken solution</p>
  
  <p>require() is not a part of browser based JS, therefore I don't want TypeScript to output it at all</p>
  
  <p>EDIT2: Since more details of my setup have been requested, here you go:
  The structure of my wwwroot/js directory is as so:</p>
  
  <pre><code>/def
  ..react.d.ts
  ..react-dom.d.ts
  tsconfig.json
  source .tsx and compiled .js files
  </code></pre>
  
  <p>Note that the d.ts files are copypasta from the repositories. There doesn't seem to be a way to load them in "properly" without adding ridiculous dependencies to the project such as node. NuGet modules that seem to do this in regular mvc have no functionality in mvc core</p>
  
  <p>I've also tried moving the d.ts files to be in the same folder as everything else, this has no effect</p>
  
  <p>tsconfig.json looks like this:</p>
  
  <pre><code>{
    "compileOnSave": true, //Doesn't do anything? Build required to compile
    "compilerOptions": {
      "noImplicitAny": false,
      "noEmitOnError": true,
      "removeComments": false,
      "sourceMap": true,
      "target": "es5", //Is this the ES version I'm supposed to be typing in or the ES version to compile to? Irrelevant, changing this does nothing
      "jsx": "react" //Using "preserve" outputs a jsx file to go through the React Babel compiler, does not solve issue
      //"module": Irrelevant, a "don't worry I've got them covered" flag option doesn't exist, no options are suitable for browser use
      //"noResolve": Irrelevant, does nothing
    },
    //"files":[] Explicitly including the d.ts files here doesn't seem to do anything, does not allow me to remove import lines
    "exclude": [ //Have tried removing this, doing so has no effect, does not allow me to remove import lines
      "node_modules",
      "wwwroot"
    ]
  }
  </code></pre>
  
  <p>Since I'm using Visual Studio everything compiles on build, I assume it's using tsc.exe under the hood</p>
  
  <p>As for React... I have the following listed in the dependencies section of project.json</p>
  
  <pre><code>"React.AspNet": "2.5.0",
  "React.Core": "3.0.0-rc1"
  </code></pre>
  
  <p>In startup.cs I have the following in ConfigureServices:</p>
  
  <pre><code>services.AddJsEngineSwitcher(
      options=&gt;options.DefaultEngineName = V8JsEngine.EngineName
  ).AddV8();
  services.AddSingleton&lt;IHttpContextAccessor, HttpContextAccessor&gt;();
  services.AddReact();
  </code></pre>
  
  <p>...and the following in configure</p>
  
  <pre><code>app.UseReact(config =&gt; {});
  </code></pre>
  
  <p>For development purposes I have the following in my _Layout.cshtml</p>
  
  <pre><code>&lt;environment names="Development"&gt;
      &lt;script src="https://unpkg.com/react@15.3.2/dist/react.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"&gt;&lt;/script&gt;
  &lt;/environment&gt;
  </code></pre>
  
  <p>This is a learning project so it won't go to production mode, but if it did I would self-host the react source code and put it through the default bundler for bundling and minification. I don't believe that the positives of using a cdn outweigh the risks</p>
  
  <p>I have tried using /// references, they seem to be a deprecated feature and in this case they don't do anything</p>
  
  <p>I have tried using the following syntax to import react, but this also leads to different non-browser compatible code being output</p>
  
  <pre><code>import React = __React;
  import ReactDOM = __React.__DOM;
  </code></pre>
  
  <p>It's important to note that both TypeScript and React work completely under these conditions on their own, no node dependency, no silly packing thing. It is only the TypeScript module system that insists on outputting things I don't need</p>