feat: support react 18

config/.eslintrc.js

@@ -1,7 +1,7 @@
 const { babel } = require('../lib/presets');
 
 module.exports = {
-  extends: '@edx/eslint-config',
+  extends: ['@edx/eslint-config', 'plugin:import/typescript'],
   plugins: ['@typescript-eslint'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -43,5 +43,6 @@ module.exports = {
   },
   ignorePatterns: [
     'module.config.js',
+    'env.config.*',
   ],
 };

config/jest.config.js

@@ -21,7 +21,7 @@ module.exports = {
   ],
   rootDir: process.cwd(),
   moduleNameMapper: {
-    '\\.svg': path.resolve(__dirname, 'jest/svgrMock.js'),
+    '\\.svg': path.resolve(__dirname, 'jest/svgrMock.jsx'),
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': path.resolve(__dirname, 'jest/fileMock.js'),
     '\\.(css|scss)$': 'identity-obj-proxy',
     'env.config': envConfigPath,

config/jest/svgrMock.jsx

@@ -0,0 +1,4 @@
+export const ReactComponent = (props) => <div data-testid="IconMock" {...props} />;
+
+const mock = 'icon/mock/path';
+export default mock;

config/webpack.dev-stage.config.js

@@ -109,7 +109,7 @@ module.exports = merge(commonConfig, {
       },
       {
         test: /.svg(\?v=\d+\.\d+\.\d+)?$/,
-        issuer: /\.jsx?$/,
+        issuer: /\.(jsx?|tsx?)$/,
         use: ['@svgr/webpack'],
       },
       // Webpack, by default, uses the url-loader for images and fonts that are required/included by

config/webpack.dev.config.js

@@ -127,7 +127,7 @@ module.exports = merge(commonConfig, {
       },
       {
         test: /.svg(\?v=\d+\.\d+\.\d+)?$/,
-        issuer: /\.jsx?$/,
+        issuer: /\.(jsx?|tsx?)$/,
         use: ['@svgr/webpack'],
       },
       // Webpack, by default, uses the url-loader for images and fonts that are required/included by

config/webpack.prod.config.js

@@ -140,7 +140,7 @@ module.exports = merge(commonConfig, {
       },
       {
         test: /.svg(\?v=\d+\.\d+\.\d+)?$/,
-        issuer: /\.jsx?$/,
+        issuer: /\.(jsx?|tsx?)$/,
         use: ['@svgr/webpack'],
       },
       // Webpack, by default, uses the url-loader for images and fonts that are required/included by

example/.eslintrc.js

@@ -1,3 +1,4 @@
+// @ts-ignore
 const config = require('../config/.eslintrc');
 
 module.exports = config;