DEV Community

kashingupta
kashingupta

Posted on

Transform decorator (@transform) not working using web-pack in NestJs

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;
Enter fullscreen mode Exit fullscreen mode

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'),
  },
};
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

image: transformer decorator is working - white spaces trimmed

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

image: transformer decorator is not working - white spaces not trimmed

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

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay