Fix retrocompat with React 16 and TypeScript 3 https://github.com/garronej/tss-react/issues/95

src/lib/components/Error.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/Info.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import { assert } from "../tools/assert";

src/lib/components/KcApp.tsx

@@ -1,4 +1,4 @@
-import { lazy, memo, Suspense } from "react";
+import React, { lazy, memo, Suspense } from "react";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { KcProps } from "./KcProps";
 

src/lib/components/Login.tsx

@@ -1,4 +1,4 @@
-import { useState, memo } from "react";
+import React, { useState, memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginConfigTotp.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginIdpLinkConfirm.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginIdpLinkEmail.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginOtp.tsx

@@ -1,4 +1,4 @@
-import { useEffect, memo } from "react";
+import React, { useEffect, memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginPageExpired.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginResetPassword.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginUpdatePassword.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginUpdateProfile.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LoginVerifyEmail.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/LogoutConfirm.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import { useCssAndCx } from "tss-react";
 
 import Template from "./Template";

src/lib/components/Register.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/components/RegisterUserProfile.tsx

@@ -1,4 +1,4 @@
-import { useMemo, memo, useEffect, useState, Fragment } from "react";
+import React, { useMemo, memo, useEffect, useState, Fragment } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";

src/lib/components/Template.tsx

@@ -1,4 +1,4 @@
-import { useReducer, useEffect, memo } from "react";
+import React, { useReducer, useEffect, memo } from "react";
 import type { ReactNode } from "react";
 import { getMsg, getCurrentKcLanguageTag, changeLocale, getTagLabel } from "../i18n";
 import type { KcLanguageTag } from "../i18n";

src/lib/components/Terms.tsx

@@ -1,4 +1,4 @@
-import { useReducer, useEffect, memo } from "react";
+import React, { useReducer, useEffect, memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

src/lib/i18n/index.tsx

@@ -1,5 +1,6 @@
 import "minimal-polyfills/Object.fromEntries";
 //NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
+import React from "react";
 import ReactMarkdown from "react-markdown";
 import memoize from "memoizee";
 import { kcMessages as kcMessagesBase } from "./generated_kcMessages/18.0.1/login";

src/lib/tsconfig.json

@@ -7,7 +7,7 @@
         "target": "ES2020",
         "lib": ["es2015", "DOM", "ES2019.Object"],
         "moduleResolution": "node",
-        "jsx": "react-jsx",
+        "jsx": "react",
         "allowSyntheticDefaultImports": true
     },
     "references": [

src/lib/useFormValidationSlice.tsx

@@ -1,5 +1,5 @@
 import "./tools/Array.prototype.every";
-import { useMemo, useReducer, Fragment } from "react";
+import React, { useMemo, useReducer, Fragment } from "react";
 import type { KcContextBase, Validators, Attribute } from "./getKcContext/KcContextBase";
 import { getMsg } from "./i18n";
 import type { KcLanguageTag } from "./i18n";

src/test/tsconfig.json

@@ -13,7 +13,7 @@
         "incremental": true,
         "strict": true,
         "downlevelIteration": true,
-        "jsx": "react-jsx",
+        "jsx": "react",
         "noFallthroughCasesInSwitch": true
     },
     "include": [".."]