Typescript enums don't work with create-react-app loader

Describe the bug

Whatever version of webpack/babel/??? is included is not handling node typescript modules that use typescript enum. If you do you end up with

Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

It’s unclear to me when using create-react-app how to update webpack or webpack.config as that’s all hidden (as far as I know). Sorry in advance if this isn’t exactly a create-react-app bug but I thought it would be best to start here.

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /xxxxx/.npm/_npx/54923/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.16.3 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Firefox: 76.0
    Safari: 13.1
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Start by building the “module”. I’ve created an example. So, do this:

• cd <somewhere safe>
• git clone https://github.com/Randgalt/react-enum-module-bug.git
• cd react-enum-module-bug
• npm run package

1. Create a new react app and then install the module

• npx create-react-app enum-bug --template typescript
• cd enum-bug
• npm install <base path>/react-enum-module-bug/enum-bug-module-1.0.0.tgz -s

1. Add a reference to the enum somewhere

• Open App.tsx from the newly created app
• Add import {EnumBug} from 'enum-bug-module';
• Somewhere in the body add {EnumBug.one}

1. npm start

Bam. You should get the error.

Expected behavior

It shouldn’t fail on a typescript enum.

Actual behavior

Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Reproducible demo

See: Steps to reproduce

[tech4GT]

I was also able to solve our issue using react-app-rewired

You basically wanna add the path containing your enums to your includes array in the babel loader options. Depending on your project you might also have to add a typescript preset. But once babel knows it needs to load files from the path you mentioned ( node_modules in my case) and it knows how to load it (typescript preset), you should be good to go!

[kruegernet]

@PaulPCIO

logically the files should live within the project filesystem in order for the transpiling to work, but a symlink does not.

Can you justify and/or explain this? All my interfaces that I share between front and backend live on disk in the server project, and are symlinked into the client project /src/interfaces. Every single regular interface works, just enums don’t (unless they are real files in the client project). The way file systems work, tsc should not care (nor even know) if it’s reading a file direct or through a symlink. Something is broken. I think it’s with tsc at this point.