ExpressJS: Param Key Sending Multiple Values with the Same Key

Viewed 105

enter image description here

I could not retrieve my exact uid from the route. I've tried using different routes user/:uid and profile/:id but still to no avail. I do have another idea of sending it through param query (/user?uid=myuidverylongstring) but I wanted to use param instead since it makes the route looks cleaner and concise.

Potential cause: I think the templating engine messes it up since the log shows static files are being referenced as uid key iteratively.

Packages/Dependencies:

Node version: v14.17.0

"dependencies": {
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1",
    "firebase-admin": "^9.9.0",
    "pug": "^3.0.2",
    "tailwindcss": "^2.1.4"
  }

My Code

router.get('/:id', async (req, res) => {
    console.log(req.params)
}

EDIT:

So I removed async from the code and it seems to work properly but the static files keep printing too. I use then-catch instead for any promise-based functionality inside the route.

I don't know whether it is an actual bug or it is how the templating engine works in an async environment.

enter image description here

EDIT 2:

It is still not resolved and async seems to have nothing to do with this. Express keeps overwriting the key with the name of static files. If I hardcoded the uid into the app, it is working but the view will not render with all the required static files (css/js/picture).

router.get('/user/:id', (req, res) => {
    console.log(req.params)
    const user = res.locals.user
    firebase.auth().getUser('rU8ZPP1dMZQGa1xxjnlglyL7sqB2').then( userProfile => {
        res.render('admin/userprofile', {
            title: `User: ${userProfile.displayName}`,
            user,
            userProfile
        })
    }).catch( err => console.log(err))
})

The code works fine but it will not render the page with the required static files.

enter image description here

Worth mentioning:

This is a sub-route file. ./backend/router/admin.js and included the route in ./index.js using app.use. All static files are being served from the main route file ./index.js.

EDIT 3:

router.get('/:uid/user', async (req, res) => {
    const user = res.locals.user
    const userProfile = await firebase.auth().getUser(req.params.uid)
    res.render('admin/userprofile', {
        title: `User: ${req.params.uid}`,
        user,
        userProfile,
    })
})

I am not sure what's happening, somehow I get to make it work by using /:uid/user route. It is clearly confusing and also a big relief as I got it working. The static files seem to be my side of error, the main template layout.pug should have relative file calls (/style.css instead of style.css) and both my templating engine and static serve are as below:

// Application Configuration
app.use(express.static(path.join(__dirname, 'public')))

// Rendering engine
app.set('view engine', 'pug')
app.set('views', path.join(__dirname + '/views'))

I think it is technically solved since I managed to view my page with the required uid and the page is rendering with all the required static files.

enter image description here

0 Answers
Related