Cannot read properties of undefined (reading 'context')

[jaymarkjairi]

UseMiddleware is not working after build.

I try this solution but it is not working my target in tsconfig.json is "ES2021": https://stackoverflow.com/questions/61291222/cannot-read-property-context-of-undefined-graphql

this is my tsconfig.json

{
  "compilerOptions": {
    "composite": false /* Enable constraints that allow a TypeScript project to be used with project references. */,
    /* Language and Environment */
    "target": "ES2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "lib": [
      "ES2021",
      "esnext.asynciterable"
    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
    "experimentalDecorators": true /* Enable experimental support for TC39 stage 2 draft decorators. */,
    "emitDecoratorMetadata": true /* Emit design-type metadata for decorated declarations in source files. */,
    "module": "commonjs" /* Specify what module code is generated. */,
    "rootDir": "src" /* Specify the root folder within your source files. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "baseUrl": "." /* Specify the base directory to resolve non-relative module names. */,
    "outDir": "dist" /* Specify an output folder for all emitted files. */,
    "importHelpers": true /* Allow importing helper functions from tslib once per project, instead of including them per-file. */,
    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied `any` type.. */,
    "strictNullChecks": true /* When type checking, take into account `null` and `undefined`. */,
    "strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. 
    "strictPropertyInitialization": false /* Check for class properties that are declared but not set in the constructor. */,
    "noImplicitThis": true /* Enable error reporting when `this` is given the type `any`. */,
    "noUnusedLocals": true /* Enable error reporting when a local variables aren't read. */,
    "noUnusedParameters": true /* Raise an error when a function parameter isn't read */,
    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "exclude": ["node_modules", "dist"],
  "include": [
    "src/**/*",
    "src/**/*.ts",
    "node_modules/**/*.d.ts",
    "node_modules/@types/**/*.d.ts"
  ]
}

resolver

import {
  Resolver,
  Query,
  Arg,
  Mutation,
  Ctx,
  UseMiddleware,
} from 'type-graphql'
import { plainToInstance } from 'class-transformer'
import { compare } from 'bcryptjs'
import UsersEntity from './entity'
import UsersRepository from './repository'

 @Query(() => UsersEntity, { nullable: true })
  @UseMiddleware(WillSendRequest)
  async me(@Ctx() { payload }: ICustomContext): Promise<UsersEntity | null> {
    console.log(payload)
    if (!payload) return null
    const userInfo = plainToInstance(UsersEntity, { id: payload.sub })
    console.log(payload)
    const user: UsersEntity = plainToInstance(
      UsersEntity,
      await this.users.findById(userInfo)
    )
    if (!user) return null
    return user
  }

Middleware

import { verify } from 'jsonwebtoken'
import { MiddlewareFn } from 'type-graphql'
import { ICustomContext } from '../CustomContext/ICustomContext'

const WillSendRequest: MiddlewareFn<ICustomContext> = async (
  { context },
  next
) => {
  console.log(context)

  if (!process.env.ACCESS_TOKEN_SECRET)
    throw Error('No ACCESS_TOKEN_SECRET identification found')

  //   if (context.req && request.http) {
  if (context.req) {
    const { authorization } = context.req.headers

    if (authorization) {
      try {
        const token = authorization.split(' ')[1]
        console.log(token)
        const payload = verify(token, process.env.ACCESS_TOKEN_SECRET)

        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        context.payload = payload as any
      } catch (err) {
        console.error(err)

        throw new Error('Internal Server Error')
      }
    }
  }
  return next()
}

export default WillSendRequest

index.ts

import 'reflect-metadata'
import express from 'express'
import expressJwt from 'express-jwt'
import dotenv from 'dotenv'
import { ApolloServer } from 'apollo-server-express'
import cookieParser from 'cookie-parser'
import cors from 'cors'
import {
ApolloServerPluginLandingPageGraphQLPlayground,
// ApolloServerPluginLandingPageDisabled,
} from 'apollo-server-core'
import { applyMiddleware } from 'graphql-middleware'
import { buildSchema } from 'type-graphql'
import { ConnectionOptions, createConnection } from 'typeorm'
import Entities from './api/users/entities'
import resolver from './api/users/resolvers'
import { ICustomContext } from './utils/CustomContext/ICustomContext'
import PayloadMap from './utils/CustomContext/PayloadMap'
// import WillSendRequest from './utils/Middleware/WillSendRequest'



const schema = applyMiddleware(
  await buildSchema({
    resolvers: [resolver],
    // globalMiddlewares: [WillSendRequest],
  })
)

const apolloServer = new ApolloServer({
  schema,
  plugins: [
    // process.env.NODE_ENV === 'production'
    //   ? ApolloServerPluginLandingPageDisabled()
    //   : ApolloServerPluginLandingPageGraphQLPlayground(),
    ApolloServerPluginLandingPageGraphQLPlayground(),
  ],
  context: ({ req, res }: ICustomContext): ICustomContext => {
    const payload: PayloadMap = req.headers.payload
      ? JSON.parse(req.headers.payload as string)
      : null

    return { req, res, payload }
  },
})

const app = express()
const port = process.env.API_PORT
const uri = `http://localhost:${port}`

app.use(
  cors({
    // eslint-disable-next-line prefer-regex-literals
    origin: new RegExp('/*/'),
    credentials: true,
    optionsSuccessStatus: 200,
  })
)

app.use(cookieParser())

app.use(
  expressJwt({
    secret: process.env.ACCESS_TOKEN_SECRET,
    algorithms: ['HS256'],
    credentialsRequired: false,
  })
)

await apolloServer.start()
apolloServer.applyMiddleware({ app, cors: false })
app.listen(port, () => {
  console.log(`🚀 Server ready at ${uri}/graphql `)
})

this is my webpack config

import webpack from 'webpack'

const config: webpack.Configuration = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: [
          /node_modules/,
          /node_modules[\\/]core-js/,
          /node_modules[\\/]webpack[\\/]buildin/,
        ],
        use: [
          { loader: 'babel-loader' },
          // { loader: 'ts-loader' },
          // { loader: 'eslint-loader' }, //deprecated
        ],
      },
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        use: [{ loader: 'ts-loader' }],
      },
      {
        test: /\.js$/,
        enforce: 'pre',
        loader: 'source-map-loader',
      },
    ],
  },
}

export default config

import webpack from 'webpack'
import TerserPlugin from 'terser-webpack-plugin'
import nodeExternals from 'webpack-node-externals'
import commonPaths from './common-paths'

const config: webpack.Configuration = {
  mode: 'production',
  devtool: 'source-map',
  target: 'node',
  node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false, // if you don't put this is, __dirname
    __filename: false, // and __filename return blank or /
  },
  entry: {
    app: [`${commonPaths.appEntry}/index.ts`],
  },
  output: {
    filename: '[name].[contenthash].js',
    clean: true,
  },
  // cache: {
  //   type: 'filesystem',
  // },
  externals: [nodeExternals()], // Need this to avoid error when working with Express
  optimization: {
    moduleIds: 'deterministic',
    // providedExports: true,
    // sideEffects: true, // providedExports is needed to activate ... this will minimize the output code
    // usedExports: 'global',
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'node_vendors', // part of the bundle name and
          // can be used in chunks array of HtmlWebpackPlugin
          chunks: 'all',
        },
        commons: {
          test: /[\\/]src[\\/]components[\\/]/,
          chunks: 'all',
          minSize: 0,
        },
      },
    },
  },
}

export default config

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

Thank you...