feat: ensure Webpack and ESLint adhere to tsconfig.json paths (#636)

Author: adamstankiewicz

.eslintrc.js

@@ -7,4 +7,5 @@ module.exports = createConfig('eslint', {
     'global-require': 'off',
     'no-template-curly-in-string': 'off',
   },
+  ignorePatterns: ['example/**/*'],
 });

config/.eslintrc.js

@@ -37,6 +37,11 @@ module.exports = {
     'import/no-import-module-export': 'off',
     'react/function-component-definition': [2, { namedComponents: 'arrow-function' }],
   },
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
   globals: {
     newrelic: false,
     PARAGON_THEME: false,

config/webpack.common.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 const ParagonWebpackPlugin = require('../lib/plugins/paragon-webpack-plugin/ParagonWebpackPlugin');
 const {
@@ -45,6 +46,9 @@ module.exports = {
       'env.config': false,
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    plugins: [
+      new TsconfigPathsPlugin(),
+    ],
   },
   optimization: {
     splitChunks: {
@@ -59,7 +63,6 @@ module.exports = {
     // RemoveEmptyScriptsPlugin get rid of empty scripts generated by webpack when using mini-css-extract-plugin
     // This helps to clean up the final bundle application
     // See: https://www.npmjs.com/package/webpack-remove-empty-scripts#usage-with-mini-css-extract-plugin
-
     new RemoveEmptyScriptsPlugin(),
     new ParagonWebpackPlugin(),
   ],

example/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "../bin/fedx-scripts.js jest ./src",
     "build": "../bin/fedx-scripts.js webpack",
-    "lint": "../bin/fedx-scripts.js eslint . --ext .jsx,.js",
+    "lint": "../bin/fedx-scripts.js eslint --ext .jsx --ext .js --ext .ts --ext .tsx",
     "babel": "../bin/fedx-scripts.js babel src --out-dir dist/babel --source-maps --ignore **/*.test.jsx,**/*.test.js --copy-files",
     "start": "../bin/fedx-scripts.js webpack-dev-server",
     "serve": "../bin/fedx-scripts.js serve"

example/src/index.jsx renamed to example/src/index.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App';
+import App from '@/App';
 
 // This line is to emulate what frontend-platform does when i18n initializes.
 // It's necessary because our stylesheet is generated with `[dir="ltr"]` as a prefix on all
@@ -9,5 +9,7 @@ import App from './App';
 global.document.getElementsByTagName('html')[0].setAttribute('dir', 'ltr');
 
 const rootContainer = document.getElementById('root');
-const root = createRoot(rootContainer);
-root.render(<StrictMode><App /></StrictMode>);
+if (rootContainer) {
+  const root = createRoot(rootContainer);
+  root.render(<StrictMode><App /></StrictMode>);
+}

example/tsconfig.json

@@ -2,7 +2,10 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "rootDir": ".",
-    "outDir": "dist"
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
   },
   "include": [
     ".eslintrc.js",
@@ -13,4 +16,4 @@
     "node_modules",
     "dist",
   ]
-}
+}