Getting Cannot find package 'socket.io-client' when importing socket.io-client

[asobirov]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

16.4.2

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

yarn dev (next dev)

Describe the Bug

Getting the error when trying to import socket.io-client in pages/chat.tsx folder:

import { io } from "socket.io-client";
const socket = io();

Error:

Error: Cannot find package 'socket.io-client' imported from /someProjectName/.next/server/pages/chat.js
Did you mean to import socket.io-client-npm-4.3.2-fba370e9d7-e8c1c76848.zip/node_modules/socket.io-client/build/cjs/index.js?

This is the line with socker.io-client from exports.module of ./next/server/pages/chat.js file:

/***/ "socket.io-client":
/*!***********************************!*\
  !*** external "socket.io-client" ***!
  \***********************************/
/***/ ((module) => {

module.exports = import("socket.io-client");;

/***/ })

};
;

package.json

{
  "name": "chat",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^1.7.1",
    "@chakra-ui/theme-tools": "^1.3.1",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@fontsource/poppins": "^4.5.0",
    "@next-auth/prisma-adapter": "next",
    "@prisma/client": "3.5.0",
    "express": "^4.17.1",
    "focus-visible": "^5.2.0",
    "framer-motion": "^4",
    "iconoir-react": "^2.1.0",
    "next": "12.0.4",
    "next-auth": "beta",
    "next-seo": "^4.28.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "socket.io": "^4.3.2",
    "socket.io-client": "^4.3.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "16.11.7",
    "@types/react": "17.0.35",
    "eslint": "7",
    "eslint-config-next": "12.0.4",
    "prisma": "3.5.0",
    "ts-node": "^10.4.0",
    "typescript": "4.4.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "./",
    "paths": {
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"],
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Expected Behavior

No import error

To Reproduce

Not sure, however I just installed the socket.io-client

[asobirov]

Apparently it's yarn v3 issues.
Issue was explained here: #30873

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.