title: Typescript not compiling enum in symlinked folder
body: <p><strong>EDIT:</strong> Unfortunately this seems like a known issue that cannot be solved without messing with create-react-app, although I could be wrong :( <a href="https://github.com/facebook/create-react-app/issues/3547#issuecomment-593764097" rel="nofollow noreferrer">https://github.com/facebook/create-react-app/issues/3547#issuecomment-593764097</a></p>
  <p>I am working on a react project using typescript and firebase functions, with my firebase functions project folder inside the project folder for the react app. As there are lots of enums and interfaces that I want to keep consistent between my frontend (the react app) and my backend (the firebase functions), I use a symlink to share a folder containing files common between these two projects. This works fine with interfaces, but causes errors when I try to use an enum exported from this symlinked folder:</p>
  <pre><code>ERROR in ./functions/src/shared-types/roles.ts 3:0
  Module parse failed: The keyword 'enum' is reserved (3:0)
  File was processed with these loaders:
   * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
   * ./node_modules/source-map-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.
  | __webpack_require__.$Refresh$.runtime = require('/Users/joel/my-project/node_modules/react-refresh/runtime.js');
  | 
  &gt; enum Roles {
  |   Admin = 'Admin',
  |   Access = 'Access',
  </code></pre>
  <h2>Repro</h2>
  <p>Starting from a fresh create-react-app with typescript support, add a folder called <code>shared-types</code> at the same level as <code>src</code> and put a file in it called <code>MyEnum.ts</code>:</p>
  <pre class="lang-js prettyprint-override"><code>// shared-types/MyEnum.ts
  enum MyEnum {
    Foo = &quot;foo&quot;,
    Bar = &quot;bar&quot;
  }
  export default MyEnum;
  </code></pre>
  <p>Then, make a symlink between that folder and another one also called <code>shared-types</code> inside <code>src</code>:</p>
  <pre class="lang-bash prettyprint-override"><code>$ ln -s /path/to/project/shared-types /path/to/project/src/shared-types
  </code></pre>
  <p>Then, import and use <code>MyEnum</code> in <code>App.tsx</code>:</p>
  <pre class="lang-js prettyprint-override"><code>// src/App.tsx
  import React from 'react';
  import './App.css';
  import MyEnum from &quot;./shared-types/MyEnum&quot;;
  function App() {
      return (
      &lt;div className=&quot;App&quot;&gt;
          &lt;h1&gt;{MyEnum.Bar}&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Finally, just run <code>npm start</code>:</p>
  <pre><code>ERROR in ./shared-types/MyEnum.ts 3:0
  Module parse failed: The keyword 'enum' is reserved (3:0)
  File was processed with these loaders:
   * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
   * ./node_modules/source-map-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.
  | __webpack_require__.$Refresh$.runtime = require('/Users/joel/repro/node_modules/react-refresh/runtime.js');
  | 
  &gt; enum MyEnum {
  |     Foo = 'foo',
  |     Bar = 'bar',
  </code></pre>
  <h2>Things that aren't causing it</h2>
  <ul>
  <li>It's not that typescript is ignoring the <code>shared-types</code> folder, as everything compiles fine if you add an interface to that folder and use it in <code>App.tsx</code>. Plus, running <code>tsc --listFilesOnly</code> will return a list including <code>/path/to/project/src/shared-types/MyEnum.tsc</code>.</li>
  <li>It's not that my version of typescript doesn't support enums or that enums are disabled, as everything works fine if you add an enum to <code>App.tsx</code> itself.</li>
  </ul>
  <hr />
  <p>Thanks in advance for the help! And feel free to suggest better ways of sharing files between these two projects in the comments if there are any!</p>