Authentication with Socket.IO broke my application

[danmikes]

Tell us what’s happening:
Describe your issue in detail here.

I added the dependencies for passport.socketio@~3.7.0 , connect-mongo@~3.2.0 , and cookie-parser@~1.4.5 and now there is a whole bunch of errors. Cannot load all these modules. I spend hours searching for the mistake. Even cloned the project again, same result. I even tried all the (older) versions they suggest in the description. To no avail. I am a bit desperate.

glitch: Glitch :･ﾟ✧

Your code so far

My dependencies in package.json:

  "dependencies": {
    "bcrypt": "^5.0.1",
    "cookie-parser": "^1.4.5",
    "connect-mongo": "^4.4.1",
    "dotenv": "^8.2.0",
    "express": "^4.16.1",
    "express-session": "^1.17.2",
    "mongodb": "^4.0.1",
    "node": "12.18.0",
    "passport": "^0.4.1",
    "passport-github": "^1.1.0",
    "passport-local": "^1.0.0",
    "passport-socketio": "^3.7.0",
    "pug": "^3.0.0",
    "socket.io": "^4.1.3"
  },

my initialisations in server.js

"use strict";
require("dotenv").config();
const auth = require('./auth.js')
const express = require("express");
const fccTesting = require("./freeCodeCamp/fcctesting.js");
const myDB = require("./connection");
const passport = require("passport");
const routes = require('./routes.js')
const session = require("express-session");

const app = express();
const cookieParser = require('cookie-parser')
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const MongoStore = require('connect-mongo')(session);
const URI = process.env.MONGO_URI
const passportSocketIo = require('passport.socketio')
const store = new MongoStore({ url: URI })

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.115 Safari/537.36

Challenge: Authentication with Socket.IO

Link to the challenge:

freeCodeCamp.org

[danmikes]

Even stranger is that even when I rewind to a moment that everything worked before, the problems remain. How can that be?

[danmikes]

I started with a clean slate on this link:

Glitch

I renamed the broken application on this link:

Glitch

I would still appreciate if someone finds the problem.

[Sky020]

Hello there,

@danmikes

    "passport-socketio": "^3.7.0",

Please note: passport-socketio is not the same as passport.socketio.

Also, I am not sure what is your latest code, but the versioning should be using the tilde (~), not the caret (^) - patch vs minor versioning.

EDIT: For any further issues, it looks like it could be a limitation of Glitch - preset to use a deprecated Node version, and upgrading takes some know-how. The easiest approach might be to use a different service like CodeSandbox or Replit.

Hope this helps

[danmikes]

I have been changing a lot indeed on the code. Sorry for that. I was trying all kinds of things. Thanks for the tip on tilde vs. caret. and for spotting the typo in passport.socketio

[danmikes]

Question: why should one use tilde and not caret?
Thanks also for suggesting CodeSandBox or Replit.
Remark: I restarted the project using VS Code and deploying the site via Heroku.

[danmikes]

I got stuck with vscode/github/heroku so I am doing it with codesandbox now and am almost done. Thank you for the suggestion.

[Sky020]

@danmikes

why should one use tilde and not caret?

I encourage you to research into this topic. Searching “npm versioning” should yield quite a few results.
As for why use a tilde over a caret in the freeCodeCamp curriculum - it is safer to allow some version updates (patches) which make no structural changes to the library/package, as this ensures the way the freeCodeCamp tests interact with the library/package is consistent. Minor updates (tilde) have been known to break the freeCodeCamp tests - so, we decided to avoid them.

@danmikes

Remark: I restarted the project using VS Code and deploying the site via Heroku.

Brilliant! I believe you will learn a lot of useful skills going this route. Personally, this is what I did, and I found it useful to think of these challenges as an excuse to explore where/how to host fullstack applications.

@danmikes

I got stuck with vscode/github/heroku

No worries. I still recommend exploring this avenue of developing, though.

Happy coding