Error with isolatedModules in Create-React-App

[Garwin4j]

Hello I get this error with Create-React-App@2.1.8 ( "react-scripts": ","typescript": "3.3.3333")

D:/projects/ed/new-react-typescript/node_modules/tsx-control-statements/index.d.tsx
Type error: Cannot compile namespaces when the '--isolatedModules' flag is provided.  TS1208

    1 | 
  > 2 | declare function Choose(): any;
      | ^
    3 | declare function When(props: { condition: boolean; }): any;
    4 | declare function Otherwise(): any;
    5 | declare function If(props: { condition: boolean; }): any;

I tried to set isolatedModules to false in the tsconfig.json file, but it is set back to true on build.
is there anyway to fix this without setting isolatedModules to false.

NOTE: tried this suggestion in the index.d.tsx file but then my code could find : microsoft/TypeScript#15230 (comment)

[KonstantinSimeonov]

I'll look into it in several hours :)

[KonstantinSimeonov]

I've managed to replicate your error by using create-react-app with typescript and I rolled a hacky solution that you can check out in this example.

The way I patched it up and got it working was basically the following:

1. added custom typings to a directory in the src folder:

export declare type TChildren =
	| JSX.Element
	| string
	| number
	| boolean
	| null
	| typeof undefined;

export declare function Choose(props: { children?: TChildren | TChildren[] }): any;
export declare function When(props: { children?: TChildren | TChildren[]; condition: boolean; }): any;
export declare function Otherwise(props: { children?: TChildren | TChildren[] }): any;
export declare function If(props: { children?: TChildren | TChildren[]; condition: boolean; }): any;
export declare function For<T>(props: { children?: TChildren | TChildren[]; each: string; of: Iterable<T>; index?: string; }): any;
export declare function With(props: { children?: TChildren | TChildren[]; [id: string]: any; }): any;

export declare interface IntrinsicAttributes {
	children?: TChildren | TChildren[];
}

2. and then import the control components in the files you're using them like that:

import { Choose, For, If, Otherwise, When } from './typings/tsx-control-statements.d';

3. I also had to eject the create-react-app scripts, since I do not know of another way to configure the build scripts. The only change I did to the build scripts was adding the tsx-control-statements transformer to the ts-loader options.

@Garwin4j Let me know if the solution above works for you. Feel free to contact me on gitter. Outside of that, I'll continue working on a solution for the typings.

[Garwin4j]

Thank you so very much for the reply and the support. Forgive me for my delay. I will look into it. Thank you very much for you time again.

…

On Wed, 20 Mar 2019, 15:48 Konstantin Simeonov, ***@***.***> wrote: I've managed to replicate your error by using create-react-app with typescript and I rolled a hacky solution that you can check out in this example <https://github.com/KonstantinSimeonov/tsx-control-statements/tree/master/examples/my-app>. The way I patched it up and got it working was basically the following - added custom typings to a directory in the src folder: export declare type TChildren = | JSX.Element | string | number | boolean | null | typeof undefined; export declare function Choose(props: { children?: TChildren | TChildren[] }): any; export declare function When(props: { children?: TChildren | TChildren[]; condition: boolean; }): any; export declare function Otherwise(props: { children?: TChildren | TChildren[] }): any; export declare function If(props: { children?: TChildren | TChildren[]; condition: boolean; }): any; export declare function For<T>(props: { children?: TChildren | TChildren[]; each: string; of: Iterable<T>; index?: string; }): any; export declare function With(props: { children?: TChildren | TChildren[]; [id: string]: any; }): any; export declare interface IntrinsicAttributes { children?: TChildren | TChildren[]; } And then import the control components in the files you're using them like that: import { Choose, For, If, Otherwise, When } from './typings/tsx-control-statements.d'; I also had to eject the create-react-app scripts, since I do not know of another way to configure the build scripts. The only change I did to the build scripts was adding the tsx-control-statements transformer to the ts-loader options. @Garwin4j <https://github.com/Garwin4j> Let me know if the solution above works for you. Feel free to contact me on gitter. Outside of that, I'll continue working on a solution for the typings. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjYW4_FIOkm8ljbzqp4fKszk-gGf51kks5vYp61gaJpZM4b_gwm> .

[TiaossuP]

1. I also had to eject the create-react-app scripts, since I do not know of another way to configure the build scripts. The only change I did to the build scripts was adding the tsx-control-statements transformer to the ts-loader options.

maybe we need a addTsLoaderTransfomer function for custimize-cra, which can modify webpack config without eject

[Garwin4j]

That would work for me since I am using customize-cra now.

…

On Thu, 21 Mar 2019, 00:58 TiaossuP, ***@***.***> wrote: 1. I also had to eject the create-react-app scripts, since I do not know of another way to configure the build scripts. The only change I did to the build scripts was adding the tsx-control-statements transformer to the ts-loader options. maybe we need a addTsLoaderTransfomer function for custimize-cra <https://github.com/arackaf/customize-cra#customize-cra>, which can modify webpack config without eject — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjYW4Z7gsFEvEb-DvRchVplvuwuDzdjks5vYx98gaJpZM4b_gwm> .

[KonstantinSimeonov]

@TiaossuP Not forcing users of create-react-app to eject their scripts definitely sounds like a better solution. I'll contact the guys maintaining customize-cra and work on a pull request if they're interested in accepting my changes - this shouldn't be too hard a feature to introduce.

[KonstantinSimeonov]

@TiaossuP After some investigation, using tsx-control-statements with create-react-app without modifying the scripts starts to seem quite hairy to me.

The default create-react-app scripts use babel-loader to load the typescript code by using babel-preset-typescript, which basically parses the typescript code to an ast and treats it as a javascript ast by ignoring all the types. What this means is that the resulting code is not emitted by the typescript compiler and therefore tsx-control-statements cannot be included in the compilation chain.

Some solutions which come to mind:

1. Ejecting and editing the scripts, so they actually compile the code with the typescript compiler and the tsx-control-statements transformer
2. Prepending a new module rule to the react-scripts config which uses the typescript compiler and tsx-control-statements (this will not reuse the default configuration from react-scripts though)
3. Extending the default configs with babel-plugin-jsx-control-statements, which should work on the code that has been stripped of the typescript types

Regarding the typings, I'll be publishing an updated version of them in the next one or two days.

[KonstantinSimeonov]

a728ad7 introduces stub definitions for the components that are available only during compile time and are stripped by the transformer. These definitions can be imported to appease the typechecker. Examples can be found in the readme, the examples dir (whoa, no wae) and the tests. This should cover the isolated modules error.

Regarding the state of integration with create-react-app, I haven't looked at it for a while and for the time being all I can provide is a slightly outdated example (again in the examples dir) on how to wire things up using eject.