create-react-app: 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

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

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

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}

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 20
Comments: 31 (1 by maintainers)

Most upvoted comments

I’ve determined that this bug only crops up if the enum is exported from a symlink or symlinked folder. Is that your experience @Randgalt ?

kruegernet on Jul 10, 2020

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!

tech4GT on Sep 10, 2020

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

kruegernet on Aug 14, 2020

@kruegernet I am importing enums from a .d.ts file from a npm package. If i copy the same enum from the node_module to a file inside my application it works fine

Yeah I think this is a tsc bug at this point. I can import TS interfaces all day long via symlink, zero issues, production builds are perfect. Just enums exported through symlink, makes no sense…

Maybe time to go bother Microsoft…

kruegernet on Aug 14, 2020

What is the resolution here? I’m experiencing the same issue.

kruegernet on Jul 10, 2020

Just wanted to chime in to say I’m experiencing the same thing. I have an NPM module that exports some common types for other modules in the same repo. When trying to import enum types from the common types module, CRA fails with the error above. I’m either using npm link or doing a local npm install but in both cases the module is symlinked.

eysi09 on Aug 19, 2020

Facing the same issue too

@divyanshumehta

Are you trying to import an enum from a symlink or symlinked folder? Or are you importing it from within the project? I don’t know why, but exported enums seem to cause this error if exported from a symlink. Works fine if it’s in the project filesystem. At least in my environment 😕

kruegernet on Aug 10, 2020

I can confirm that symlinked enums does not play well. Moving to workspaces is the right way to do this, as @kruegernet suggedsted. Thanks!

artecoop on Mar 23, 2021

I solved this by creating a monorepo using yarn workspaces. It amounts to having your own private local npm packages that you import like import { MyEnum, MyInterface } from '@mypackage/commong';

This explains it well enough, although you should keep in mind if you’re building directly with TypeScript in parts of your stack your imports will be expected to be already compiled to JavaScript like normal npm packages.

I don’t think the TypeScript compiler is very appreciative of artificially expanding (through symlinks) the scope of its rootDir.

kruegernet on Sep 11, 2020