Express router passes style.css as reqeuest.params and maybe calls the route twice?

Question

I am creating a cocktail website & database using node.js, MySql, Express, and Pug.

I've recently tried using a route parameter so that different cocktails have different URLs instead of passing the name via get. So the URL should be "localhost:3000/cocktail/Cosmopolitan" instead of "localhost:3000/cocktail?name=Cosmopolitan". Problem is that my get route seems to be called twice. Once with the correct parameter "Cosmopolitan" and then again which the parameter "style.css" which results in the site displaying without any styling and the TypeError in the output further down.

My cocktail Route currently looks like this:

const Router = require('express-promise-router');
const db_func = require("../database/db_functions");

const router = new Router();

router.get("/:name", async (req, res) => {
    var name = req.params.name;
    console.log(req.params);
    const cocktail = await db_func.getCocktail(name);
    const ingredients = await db_func.getIngredientById(cocktail["id"]);
    console.log(ingredients);

    await res.render('cocktail', {
        cocktail: cocktail,
        ingredients: ingredients
    });
});

module.exports = router;

The problem now is that this outputs

{ name: 'Cosmopolitan' }
[
  RowDataPacket { name: 'Wodka', amount: 5, measure: 'cl', garnish: 0 },
  RowDataPacket {
    name: 'Limettensaft',
    amount: 2,
    measure: 'cl',
    garnish: 0
  },
  RowDataPacket {
    name: 'Cointreau',
    amount: 2,
    measure: 'cl',
    garnish: 0
  },
  RowDataPacket {
    name: 'Cranberrynektar',
    amount: 2,
    measure: 'cl',
    garnish: 0
  }
]
{ name: 'style.css' }
TypeError: Cannot read property 'id' of undefined
    at F:\Arbeit und Studium\Projects\Cocktail Database\Cocktail Node\routes\cocktail.js:10:65
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

The corresponding pug files. cocktail.pug:

extends layouts/layout

block content
  h4.random-title #{cocktail.name}
  p Served in a #{cocktail.glass} Glass!
  div.ingredient-list 
    - for (var i = 0; i < ingredients.length; i++)
      p - #{ingredients[i].amount} #{ingredients[i].measure} #{ingredients[i].name} 
  p Recipe by: #{cocktail.author} 

And layouts/layout.pug

doctype html
html
  head
    title Cocktailbar
    link(rel="stylesheet" type="text/css" href="style.css")
  body
    div.page-container
      ...

I'd appreciate any input!

Answer 1

Okay so the problem as Chris suggested was that my style.css was in public/style.css instead of in a separate folder.

Furthermore I linked the stylesheet with style.css instead of /style.css, or better yet /css/style.css, thereby accessing the website on localhost:3000/cocktail/style.css and triggering my route.