IBX-9109: Enabling TypeScript (ts-loader) with Webpack Encore

Author: OstafinL

ibexa/commerce/5.0/encore/ibexa.webpack.config.js

@@ -16,6 +16,7 @@ module.exports = (Encore) => {
             'prop-types': 'PropTypes',
         })
         .enableSassLoader()
+        .enableTypeScriptLoader()
         .enableReactPreset()
         .enableSingleRuntimeChunk();
 

ibexa/commerce/5.0/encore/package.json

@@ -21,11 +21,16 @@
     "@ckeditor/ckeditor5-widget": "^40.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^40.1.0",
     "@ckeditor/ckeditor5-code-block": "^40.1.0",
-    "@svgr/webpack": "^8.1.0"
+    "@svgr/webpack": "^8.1.0",
+    "ts-loader": "^9.5.1",
+    "ts-config-ibexa": "https://github.com/ibexa/ts-config-ibexa"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.6.3"
   },
   "license": "UNLICENSED",
   "private": true,

ibexa/experience/5.0/encore/ibexa.webpack.config.js

@@ -16,6 +16,7 @@ module.exports = (Encore) => {
             'prop-types': 'PropTypes',
         })
         .enableSassLoader()
+        .enableTypeScriptLoader()
         .enableReactPreset()
         .enableSingleRuntimeChunk();
 

ibexa/experience/5.0/encore/package.json

@@ -21,11 +21,16 @@
     "@ckeditor/ckeditor5-widget": "^40.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^40.1.0",
     "@ckeditor/ckeditor5-code-block": "^40.1.0",
-    "@svgr/webpack": "^8.1.0"
+    "@svgr/webpack": "^8.1.0",
+    "ts-loader": "^9.5.1",
+    "ts-config-ibexa": "https://github.com/ibexa/ts-config-ibexa"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.6.3"
   },
   "license": "UNLICENSED",
   "private": true,

ibexa/headless/5.0/encore/ibexa.webpack.config.js

@@ -16,6 +16,7 @@ module.exports = (Encore) => {
             'prop-types': 'PropTypes',
         })
         .enableSassLoader()
+        .enableTypeScriptLoader()
         .enableReactPreset()
         .enableSingleRuntimeChunk();
 

ibexa/headless/5.0/encore/package.json

@@ -21,7 +21,16 @@
     "@ckeditor/ckeditor5-widget": "^40.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^40.1.0",
     "@ckeditor/ckeditor5-code-block": "^40.1.0",
-    "@svgr/webpack": "^8.1.0"
+    "@svgr/webpack": "^8.1.0",
+    "ts-loader": "^9.5.1",
+    "ts-config-ibexa": "https://github.com/ibexa/ts-config-ibexa"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.6.3"
   },
   "license": "UNLICENSED",
   "private": true,

ibexa/oss/5.0/encore/ibexa.webpack.config.js

@@ -16,6 +16,7 @@ module.exports = (Encore) => {
             'prop-types': 'PropTypes',
         })
         .enableSassLoader()
+        .enableTypeScriptLoader()
         .enableReactPreset()
         .enableSingleRuntimeChunk();
 

ibexa/oss/5.0/encore/package.json

@@ -20,7 +20,16 @@
     "@ckeditor/ckeditor5-widget": "^40.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^40.1.0",
     "@ckeditor/ckeditor5-code-block": "^40.1.0",
-    "@svgr/webpack": "^8.1.0"
+    "@svgr/webpack": "^8.1.0",
+    "ts-loader": "^9.5.1",
+    "ts-config-ibexa": "https://github.com/ibexa/ts-config-ibexa"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.6.3"
   },
   "license": "UNLICENSED",
   "private": true,