Can't resolve 'readable-stream/duplex.js'

### Describe the bug

im sorry not good at english

my next@11 project

i got this error

my package.json
```
"dependencies": {
"@notionhq/client": "^0.4.11",
"@reduxjs/toolkit": "^1.4.0",
"@sentry/browser": "^6.15.0",
"@sentry/nextjs": "^6.15.0",
"@tippyjs/react": "^4.2.5",
"@zeit/next-source-maps": "^0.0.3",
"blob-to-buffer": "^1.2.9",
"chart.js": "^2.9.3",
"cookie": "^0.4.1",
"crypto": "^1.0.1",
"ga-4-react": "^0.1.281",
"he": "^1.2.0",
"js-base64": "^3.4.5",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"lodash.camelcase": "^4.3.0",
"mixpanel-browser": "^2.45.0",
"next": "^11.0.0",
"next-redux-wrapper": "^6.0.2",
"next-routes": "^1.4.2",
"next-runtime-dotenv": "^1.2.0",
"next-translate": "^1.1.1",
"path": "^0.12.7",
"postcss": "^8.4.14",
"rc-calendar": "^9.15.11",
"react": "17.0.2",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-dom": "17.0.2",
"react-facebook-login": "^4.1.1",
"react-ga": "^2.7.0",
"react-google-login": "^5.0.7",
"react-gtm-module": "^2.0.11",
"react-hook-form": "^6.15.4",
"react-hotjar": "^2.2.1",
"react-html-parser": "^2.0.2",
"react-icons": "^3.11.0",
"react-lazyload": "^3.1.0",
"react-lottie": "^1.2.3",
"react-modal": "^3.11.1",
"react-number-format": "^4.6.3",
"react-redux": "^7.1.3",
"react-responsive": "^8.0.3",
"react-router-dom": "^5.1.2",
"react-select": "4.3.0",
"react-spinners": "^0.8.0",
"react-textarea-autosize": "^8.3.3",
"readable-stream": "^4.1.0",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-saga": "^1.1.3",
"showdown": "^1.9.1",
"socket.io-client": "^2.3.0",
"styled-components": "^5.3.0",
"tailwindcss": "^3.1.6",
"ua-parser-js": "^0.7.28"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@graphql-codegen/cli": "^2.11.6",
"@graphql-codegen/typescript": "^2.7.3",
"@next/bundle-analyzer": "^10.0.5",
"@next/eslint-plugin-next": "^12.0.4",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@types/he": "^1.1.1",
"@types/js-cookie": "^2.2.6",
"@types/lodash.camelcase": "^4.3.6",
"@types/next-redux-wrapper": "^2.0.2",
"@types/node": "^12.7.5",
"@types/react": "17.0.38",
"@types/react-gtm-module": "^2.0.1",
"@types/react-html-parser": "^2.0.1",
"@types/react-lottie": "^1.2.5",
"@types/react-modal": "^3.12.0",
"@types/react-redux": "^7.1.16",
"@types/react-responsive": "^8.0.2",
"@types/react-slick": "^0.23.4",
"@types/socket.io-client": "^1.4.34",
"@types/styled-components": "^5.1.9",
"@types/ua-parser-js": "^0.7.36",
"@typescript-eslint/eslint-plugin": "^4.26.1",
"@typescript-eslint/parser": "^4.26.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.4.6",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"babel-plugin-styled-components": "^1.12.0",
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"eslint": "^7.4.0",
"eslint-config-airbnb-typescript": "^8.0.2",
"eslint-config-prettier": "^6.11.0",
"eslint-config-react": "^1.1.7",
"eslint-import-resolver-ts": "^0.4.2",
"eslint-import-resolver-typescript": "^2.0.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.1.2",
"globby": "^11.0.2",
"husky": "^7.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.7",
"lint-staged": "11.2.6",
"next-compose-plugins": "^2.2.0",
"node-fetch": "^2.6.7",
"prettier": "^2.0.5",
"ts-loader": "^7.0.5",
"ts-node": "^8.10.2",
"typescript": "4.4"
},

```

how do i do?

### Your Example Website or App

nope

### Steps to Reproduce the Bug or Issue

first, install
```
"@graphql-codegen/cli": "^2.11.6",
"@graphql-codegen/typescript": "^2.7.3",
```
and remove node_modules, .next
and yarn install
and yarn dev

### Expected behavior

nothing error

### Screenshots or Videos

_No response_

### Platform

- OS: MacOS@latest M1 Pro
- NodeJS: v16.16
- `graphql` version: nope
- `@graphql-codegen/*` version(s):
- "@graphql-codegen/cli": "^2.11.6"
- "@graphql-codegen/typescript": "^2.7.3"

### Codegen Config File

_No response_

### Additional context

_No response_