Transform decorator (@transform) not working using web-pack in NestJs
Tags: nestjs, webpack
Published: 2024-04-19 07:20:09

I am using @transform decorator in DTO:

```
import { Transform } from 'class-transformer';
export class PropertyDataDto {
  @IsString()
  @IsNotEmpty()
  @Transform(({ value }) => {
    return value && typeof value === 'string' && value.trim();
  })
  Description: string;
```


I have the following setup: 

**Webpack.config code:**
using webpack, bundle.js file is created as output inside dist folder

```
const path = require("path");
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const WebPackIgnorePlugin =
{
  checkResource: function(resource)
  {
    const lazyImports =
    [
        '@nestjs/microservices',
        '@nestjs/microservices/microservices-module',
        'class-transformer/storage',
        '@nestjs/websockets/socket-module',
        '@azure/functions-core',
        'applicationinsights-native-metrics'
    ];
  
    if (!lazyImports.includes(resource))
      return false;

    try
    {
      require.resolve(resource);
    }
    catch (err)
    {
      return true;
    }
  
    return false;
  }
};

module.exports =
{
  mode: 'production',
  target: 'node',
  entry:
  {
    server: './src/main.ts',
  },
  devtool: 'source-map',
  module:
  {
    rules:
    [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve:
  {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  node: {
    __dirname: false,
  },
  plugins:
  [
    new CleanWebpackPlugin(),
    new webpack.IgnorePlugin(WebPackIgnorePlugin),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'dev.env', to: 'dev.env' },
      ],
    }),
  ],
  optimization:
  {
    minimize: false
  },
  performance:
  {
    maxEntrypointSize: 1000000000,
    maxAssetSize: 1000000000
  },
  output:
  {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
```

**tsconfig.json code:**
```
{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}
```

**main.ts**


```
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';

/**
 * This function refers main function of the application
 */
function bootstrap() {
  (async () => {
    try {
      const port = process.env.PORT || 3000;
      const app = await NestFactory.create(AppModule);
      app.useGlobalPipes(
        new ValidationPipe({
          whitelist: true,
          transform: true,
          forbidNonWhitelisted: true
        })
      );
      app.enableCors();
      await app.listen(port);
    } catch (error) {
      logger.error(error);
    }
  })();
}
bootstrap();
```


While executing my application using **nest start** command: (dev environment)

*image*: [transformer decorator is working - white spaces trimmed](https://i.stack.imgur.com/rHnUg.png)

But while executing using **node dist/bundle.js** command: (prod environment)

*image*: [transformer decorator is not working - white spaces not trimmed](https://i.stack.imgur.com/0GAKh.png)


**Also, this issue exists only in @transform decorator, rest all decorators are working in both envirnments.**