Create-react-app: [TS] Const enums in third party packages

[Meemaw]

I'm having problems using Typescript with the dependencies that use Const enums. I'm getting the folowing error: Type error: Ambient const enums are not allowed when the '--isolatedModules' flag is provided.

I wanted to disable the flag but it seems CRA is forcing it. Is there a workaround around this?

[brunolemos]

Hi @Meemaw! Const enum does not work with TypeScript in Babel. This is one of the two limitations of Babel that are mentioned in the docs.

I recommend that you suggest the third party lib maintainers that they remove const enum usage since babel typescript is getting popular. Maybe make them a PR.

I'm closing this but let me know if you have any other question.

[neutiyoo]

@brunolemos Hi, I'm trying to use CRA with monaco-editor. I'm having the same issue with https://github.com/Microsoft/TypeScript/issues/20703#issuecomment-436641722.

• Can you suggest one of the best ways to approach this specific problem?

• Should I never turn off the --isolatedModules flag?

[ianschmitz]

Have you tried turning off skipLibCheck? I'm using Monaco in an app as well (0.12 I think so a few months old)

[neutiyoo]

@ianschmitz Thanks! It worked 👍

I was a bit confused with the word turning off but I got what you mean; set it true.
Therefore, I set skipLibCheck as true and it worked.

I guess it is one of the best way to solve this issue to set skipLibCheck as true.

[alangpierce]

FYI @noelyoo a downside to skipLibCheck is that all .d.ts files are skipped, even ones in your project. In an app I work on (not CRA), we have a number of internal .d.ts files, so I went with skipLibCheck: false and isolatedModules: false and set up the build system to still behave as if it was isolatedModules: true. This silenced the const enum errors in third-party libraries while still checking our .d.ts files for problems.

[feimosi]

@alangpierce could you describe how you set it up?

@brunolemos why are all of these tsconfig settings enforced by CRA? I've been using https://github.com/strothj/react-app-rewire-typescript-babel-preset for a few months now and it works without any issues (also based on Babel).

[alangpierce]

@alangpierce could you describe how you set it up?

It really depends on the build system, but I think in most situations setting isolatedModules to false should just work.

Some examples that I just tried:

• Create React App is the most difficult since the start script edits your tsconfig.json file to set isolatedModules to true. I was able to get it working by ejecting, setting isolatedModules to false in tsconfig.json, and removing the isolatedModules: true line in the ForkTsCheckerWebpackPlugin constructor in config/webpack.config.dev.js and config/webpack.config.prod.js. As far as I know there isn't a way to get it working without ejecting.
• With ts-loader, I'm pretty sure you can set transpileOnly: true or happyPackMode: true and it will work just fine even when isolatedModules is false in your tsconfig.
• With ts-node, you can use ts-node/register/transpile-only just fine even when isolatedModules is false in the tsconfig.
• With gulp-typescript, I was able to get it to work by setting isolatedModules: false in my tsconfig.json and by passing in isolatedModules: true when calling createProject. This switches it to use per-file compilation, and you don't get any isolatedModules errors because it disables typechecking.

In every one of these cases, setting isolatedModules: false is scary because it disables real safety checks that TypeScript would report. Setting it to false is a workaround to stop third-party libraries from breaking your build by including const enums, but it means that you need to be careful to not use TS features that need cross-file information to be transpiled (const enums, namespaces, re-exported types).

[tonoslav]

@alangpierce I use Create React App with Scripts and your solution somehow doesnt work for me
It somehow got rewritten anyway.

webpack.config.dev.js

webpack.config.prod.js

tsconfig.json before react-scripts start

I change the right config files because when I entered false data it crashed

Do you know what it could be , or how to use const enums even with isolatedModules?

Thank you so much

[alangpierce]

@tonoslav I just used yarn start (or npm run start) after ejecting, not react-scripts. It looks like react-scripts start still runs the code to edit your tsconfig, so you need to find some way to avoid that.