title: Confusing behavior when wiring together Rollup, ES modules, TypeScript, and JSX
body: <p>The things I noted in the title - I started to learn them just recently. They are going not that smooth, so I have to ask this little question on StackOverflow.</p>
  <h2>What I require</h2>
  <ul>
  <li>Something to pack my stuff - here comes <code>Rollup</code></li>
  <li>Bare module imports for my own module files - using <code>@rollup/plugin-node-resolve</code> for this</li>
  <li>Funny typed language - <code>TypeScript</code> and <code>@rollup/plugin-typescript</code></li>
  <li>React with JSX - it is <code>react</code> and <code>react-dom</code> packages, and <code>typescript</code>, which is able to process JSX</li>
  </ul>
  <p>I read these docs to wire these tools together:</p>
  <ul>
  <li><a href="https://www.typescriptlang.org/tsconfig" rel="nofollow noreferrer">https://www.typescriptlang.org/tsconfig</a></li>
  <li><a href="https://www.npmjs.com/package/@rollup/plugin-typescript" rel="nofollow noreferrer">https://www.npmjs.com/package/@rollup/plugin-typescript</a></li>
  </ul>
  <p>I successfully used <code>Rollup</code>, <code>@rollup/plugin-node-resolve</code>, and <code>TypeScript</code>. But with addition of <code>React</code> things went odd.</p>
  <h2>Demo project</h2>
  <p>Please look at the example project I made for illustration:<br />
  <a href="https://github.com/Ser5/RollupWireBug" rel="nofollow noreferrer">https://github.com/Ser5/RollupWireBug</a></p>
  <pre><code>git clone https://github.com/Ser5/RollupWireBug.git
  cd RollupWireBug/
  npm install or yarn install
  npm run build
  </code></pre>
  <p>The project structure is:</p>
  <pre><code>/
      src/
          js/ - only folder that contains my code
              main.tsx - entry point
              test-class.js - for testing bare import
          buggy.tsx - should be excluded from building
      dist/
          bundle.js - Rollup output file
  </code></pre>
  <h3>rollup.config.js</h3>
  <p>To my understanding the config should work like that:</p>
  <pre><code>resolve({
      moduleDirectories: ['node_modules/', 'src/js/'],
      extensions:        ['.js', '.ts', '.jsx', '.tsx'],
  }),
  </code></pre>
  <p>^ This should mean to bare import modules from <code>node_modules/</code> and <code>src/js/</code>, searching for files with noted extensions.</p>
  <p>And here comes the puzzling part:</p>
  <pre><code>typescript({
      include: [
          './**/*',
          //'src/js/**/*',
          //&quot;node_modules/**/*&quot;,
      ],
      exclude: [
          &quot;node_modules/&quot;,
          &quot;dist/&quot;,
          &quot;src/buggy.tsx&quot;,
      ],
  }),
  </code></pre>
  <p>^ This is how a configuration works for me. I must write <code>./**/*</code> in the <code>include</code> - which seems odd for me, as I believe I don't need to include every file from the project root - I need only <code>src/js/</code>.</p>
  <p>If instead of <code>./**/*</code> I use <code>src/js/**/*</code>, or <code>src/js/**/*</code> with <code>node_modules/**/*</code> - Rollup refuses to build the project, screeching:</p>
  <pre><code>src/js/main.tsx → dist/bundle.js...
  [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
  src\js\main.tsx (7:13)
  5:
  6: let myName = 'Ser5';
  7: let s      = &lt;h1&gt;{myName}&lt;/h1&gt;;
                  ^
  8: console.log(s);
  Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
  </code></pre>
  <p>It doesn't recognize the JSX syntax.</p>
  <p>Because of <code>./**/*</code> in the <code>include</code> I also need to have the <code>exclude</code> section - otherwise Rollup/TypeScript will crawl into <code>src/buggy.js</code> and even <code>dist/</code>, and try to build them as well.</p>
  <h3>tsconfig.json</h3>
  <p>I understand it as follows:</p>
  <pre><code>&quot;baseUrl&quot;: &quot;./&quot;,
  &quot;paths&quot;: {
      &quot;*&quot;: [
          &quot;node_modules/*&quot;,
          &quot;src/js/*&quot;,
      ],
  },
  </code></pre>
  <p>^ &quot;Go search modules in <code>node_modules/</code> and <code>src/js/</code> directories.&quot;</p>
  <pre><code>&quot;outDir&quot;: &quot;tsout&quot;,
  </code></pre>
  <p>^ Really no idea WTF is this. Looks like some temporary folder.</p>
  <p>And if instead of this part in <code>rollup.config.js</code></p>
  <pre><code>typescript({
      include: [
          './**/*',
      ],
      ...
  }),
  </code></pre>
  <p>I write the same thing in <code>tsconfig.json</code></p>
  <pre><code>{
      include: [
          './**/*',
      ],
      &quot;compilerOptions&quot;: {
          ...
  </code></pre>
  <p>The project still doesn't build - displaying <code>Error: Unexpected token</code> for JSX syntax.</p>
  <h2>Questions</h2>
  <ul>
  <li>Where am I wrong?</li>
  <li>Why for <code>@rollup/plugin-typescript</code> I have to include <code>./**/*</code> right from the root, and block some files with <code>include</code> section? Why can't I simply write <code>src/js/**/*</code> ?</li>
  <li>Why <code>include</code> works only for <code>@rollup/plugin-typescript</code>? And I can't write that <code>include</code> in <code>tsconfig.json</code>?</li>
  </ul>