Nest JS and Typescript with SWC is not compiling dist folder correctly

Nest JS and Typescript with SWC is not compiling dist folder correctly

If you are using Nest JS with Typescript and SWC, you may encounter issues with the compilation of the dist folder. This can be frustrating, but there are a few solutions you can try to resolve this problem.

Solution 1: Update SWC Configuration

The first solution is to update the SWC configuration in your Nest JS project. SWC is a JavaScript/TypeScript compiler that can be used as an alternative to Babel. To ensure that the dist folder is compiled correctly, you need to make sure that SWC is configured properly.

In your project’s tsconfig.json file, add the following configuration:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "jsx": "react",
    "allowJs": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "plugins": [
      {
        "name": "@swc-node/jest",
        "config": {}
      }
    ]
  }
}

This configuration ensures that the SWC compiler is used for TypeScript compilation and that the output is placed in the dist folder. The plugins section is necessary for SWC to work properly with Jest.

Solution 2: Clean and Rebuild

If updating the SWC configuration doesn’t solve the issue, you can try cleaning and rebuilding the project. Sometimes, the problem can be caused by outdated or corrupted build artifacts.

To clean the project, run the following command:

npm run clean

This command will remove the dist folder and any other build artifacts.

After cleaning the project, rebuild it by running:

npm run build

This command will compile the TypeScript code and generate a new dist folder.

Solution 3: Use a Different Compiler

If the above solutions don’t work, you can try using a different compiler instead of SWC. One popular alternative is Babel.

To switch to Babel, you need to install the necessary dependencies:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript

Then, update your project’s tsconfig.json file to use Babel:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "jsx": "react",
    "allowJs": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "plugins": [
      ["@babel/plugin-transform-typescript", { "allowDeclareFields": true }]
    ],
    "extends": "./node_modules/@nestjs/config/tsconfig.json"
  }
}

After making these changes, rebuild the project using the following command:

npx babel src --out-dir dist --extensions ".ts"

This command will compile the TypeScript code using Babel and place the output in the dist folder.

By following these solutions, you should be able to resolve the issue of Nest JS and Typescript with SWC not compiling the dist folder correctly. Choose the solution that works best for your project and enjoy a smooth compilation process!