CODEWITHSUNDEEP
javascriptreactjstypescriptwebpackcreate-react-app
Joel Newman
Joel Newman

Reputation: 185

Typescript not compiling enum in symlinked folder

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

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!

Upvotes: 2

Views: 756

Answers (1)

Joel Newman
Joel Newman

Reputation: 185

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. 🫤

Upvotes: 1

Related Questions