EDIT: Unfortunately this seems like a known issue that cannot be solved without messing with create-react-app, although I could be wrong :( https://github.com/facebook/create-react-app/issues/3547#issuecomment-593764097

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:

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');
| 
> enum Roles {
|   Admin = 'Admin',
|   Access = 'Access',

Repro

Starting from a fresh create-react-app with typescript support, add a folder called shared-types at the same level as src and put a file in it called MyEnum.ts:

// shared-types/MyEnum.ts
enum MyEnum {
  Foo = "foo",
  Bar = "bar"
}
export default MyEnum;

Then, make a symlink between that folder and another one also called shared-types inside src:

$ ln -s /path/to/project/shared-types /path/to/project/src/shared-types

Then, import and use MyEnum in App.tsx:

// src/App.tsx
import React from 'react';
import './App.css';
import MyEnum from "./shared-types/MyEnum";
function App() {
    return (
    <div className="App">
        <h1>{MyEnum.Bar}</h1>
    </div>
  );
}

export default App;

Finally, just run npm start:

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');
| 
> enum MyEnum {
|     Foo = 'foo',
|     Bar = 'bar',

Things that aren't causing it

• It's not that typescript is ignoring the shared-types folder, as everything compiles fine if you add an interface to that folder and use it in App.tsx. Plus, running tsc --listFilesOnly will return a list including /path/to/project/src/shared-types/MyEnum.tsc.
• 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 App.tsx itself.

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!

CodePudding user response：

It turns out that create-react-app doesn't support symlinks under src at all! The fact that the interface stuff worked at all seems to be a fluke.

https://github.com/facebook/create-react-app/issues/3547

This seems to have been a known issue for four years, but there is no blessed solution to it yet.