graphql-issue

I am keeping receiving error below in a webpack + graphql + apollo-server project, the build script is quite simple, by digging out all the internet but no results (tried resolutions – yarn resolutsion, npx force resolutions packages, read all the dependecies in apollo tree, etc) Error

webpack://stream/./node_modules/graphql/jsutils/instanceOf.js?:27      throw new Error("Cannot use ".concat(className, " \"").concat(value, "\" from another module or realm.\n\nEnsure that there is only one instance of \"graphql\" in the node_modules\ndirectory. If different versions of \"graphql\" are the dependencies of other\nrelied on modules, use \"resolutions\" to ensure only one version is installed.\n\nhttps://yarnpkg.com/en/docs/selective-version-resolutions\n\nDuplicate \"graphql\" modules cannot be used at the same time since different\nversions may have different capabilities and behavior. The data from one\nversion used in the function from another could produce confusing and\nspurious results."));      ^Error: Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm.
Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.
https://yarnpkg.com/en/docs/selective-version-resolutionsDuplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

 module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        include: [path.resolve(__dirname, './src/')],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: false,
          }
        }
      },
      // below matters!!!!
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
    ],
  },
  resolve: {
    // add .mjs
    extensions: ['.mjs', '.ts', '.tsx', '.js', '.jsx']
  },

It works in webpack v4 but broken in webpack v5 (which is just released)

 "dependencies": {    "apollo-server": "^2.18.2",    "graphql": "^15.3.0"  },  "devDependencies": {    "@babel/core": "^7.10.5",    "@babel/preset-env": "^7.11.5",    "@babel/preset-typescript": "^7.10.4",    "@types/bunyan": "^1.8.6",    "@types/lodash": "^4.14.161",    "@types/node": "^14.0.23",    "@types/ws": "^7.2.6",    "babel-loader": "^8.1.0",    "fork-ts-checker-webpack-plugin": "^5.0.7",    "nodemon-webpack-plugin": "^4.3.2",    "typescript": "^4.0.2",    "webpack": "^4.43.0",    "webpack-cli": "^3.3.12"  },