How to use ts-alias

[alexis-piquet]

• Add paths in the main tsconfig.json file (root directory)

Example:

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "declaration": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": false,
    "target": "esnext",
    "paths": {
      "#config": ["src/config"],
      "#config/*": ["src/config/*"],
      "#constants": ["./src/constants"],
      "#constants/*": ["./src/constants/*"],
      "#server": ["./src/server"],
      "#server/*": ["./src/server/*"],
      "#types": ["./src/types"],
      "#types/*": ["./src/types/*"],
    },
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
  ],
  "exclude": [
    "node_modules",
    "nextron.config.js",
    "app",
    "dist",
  ],
}

• Add the plugin "tsconfig-paths-webpack-plugin" in the nextron.config.js file

Example:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
const cwd = process.cwd();

module.exports = {
  mainSrcDir: 'src',
  rendererSrcDir: 'src/client',
  webpack: (config) => {
    config.resolve.plugins = [
      new TsconfigPathsPlugin({ configFile: path.resolve(cwd, 'tsconfig.json')})
    ];
    config.entry = {
      background: './src/index.ts',
    };
    return config;
  },
};

• Add "rules" and "extensions" in next.config.js

const path = require("path")
const cwd = process.cwd()
const folderPaths = [
  path.resolve(cwd, 'src/constants'),
  path.resolve(cwd, 'src/types'),
]
const rules = [
  {
    test: /\.ts$/,
    exclude: /^node_modules/,
    loader: "ts-loader",
    include: [ folderPaths ],
    options: {
      transpileOnly: true
    }
  },
  {
    test: /\.node$/,
    loader: "node-loader",
  },
]

module.exports = {
  mod: 'development',
  devtool: 'inline-source-map',
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.target = 'electron-renderer'
    }
    config.module.rules = [ ...config.module.rules, ...rules ]
    config.resolve.extensions = [ ...config.resolve.extensions, '.ts', '.tsx' ]
    return config
  },
}

You can also defined paths in the tsconfig.json file in the renderer folder.

Example:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "paths": {
      "#components": ["components"],
      "#components/*": ["components/*"],
      "#constants": ["../constants"],
      "#constants/*": ["../constants/*"],
      "#config": ["../config"],
      "#config/*": ["../config/*"],
      "#pages": ["pages"],
      "#pages/*": ["pages/*"],
      "#server": ["../server"],
      "#server/*": ["../server/*"],
      "#services": ["services"],
      "#services/*": ["services/*"],
      "#share": ["share"],
      "#share/*": ["share/*"],
      "#styles": ["styles"],
      "#styles/*": ["styles/*"],
      "#translations": ["translations"],
      "#translations/*": ["translations/*"],
      "#types": ["../types"],
      "#types/*": ["../types/*"]
    },
    "incremental": true
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "next.config.js",
    "next-env.d.ts",
    "components/**/*.ts",
    "components/**/*.tsx",
    "pages/**/*.ts",
    "pages/**/*.tsx",
    "share/**/*.ts",
    "share/**/*.tsx",
    "translations/**/*.ts",
    "translations/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

How it looks like in one of my projects:

[narasimhajupally]

Hi Alexis, thanks for the solution.
It required installing ts-loader as a dev dependency to work.

Can you please explain what is happening in each step? I want to understand what I am doing. how are each of these config files used, and in what order to produce output in the dist folder?
Thanks

[alexis-piquet]

Hey, nice to read you @narasimhajupally, for sure, I'll modify it as I've recently does for the new Show and tell