Uncaught TypeError: _projects_js__WEBPACK_IMPORTED_MODULE_2__.default is undefined

Question

I am trying to extract params from the url and react accordingly. All the extraction works fine but after modifying my code to import my router and trying to push a route, I've run into an error I simply don't understand.

Uncaught TypeError: _projects_js__WEBPACK_IMPORTED_MODULE_2__.default is undefined
    <anonymous> index.js:18
    js projects.js:99
    __webpack_require__ projects.js:241
    fn projects.js:470
    <anonymous> projects.js:6
    js projects.js:89
    __webpack_require__ projects.js:241
    fn projects.js:470
    <anonymous> index.js:2
    node_modules index.js:19
    __webpack_require__ projects.js:241
    fn projects.js:470
    <anonymous> FiltersComp.vue:5
    js projects.js:149
    __webpack_require__ projects.js:241
    fn projects.js:470
    <anonymous> FiltersComp.vue:3
    vue projects.js:119
    __webpack_require__ projects.js:241
    fn projects.js:470
    <anonymous> index.js:3
    node_modules index.js:29
    __webpack_require__ projects.js:241
    fn projects.js:470
    <anonymous> App.vue:5
    js projects.js:159
    __webpack_require__ projects.js:241
    fn projects.js:470
    <anonymous> App.vue:3
    vue projects.js:129
    __webpack_require__ projects.js:241
    fn projects.js:470
    <anonymous> main.js:3
    js projects.js:79
    __webpack_require__ projects.js:241
    __webpack_exports__ projects.js:1357
    O projects.js:283
    <anonymous> projects.js:1358
    <anonymous> projects.js:1360 

Here is my /routes/index.js:

import { createRouter, createWebHistory } from "vue-router";
import ProjectsSub from "../views/ProjectsSub.vue";
import Tr from "../../../../translation.js";
import Pr from "../projects.js"


const routes = [
  {
    path: "/projects",
    name: "projects",
    component: ProjectsSub,
  },
  {
    path: "/projects/:filter",
    name: "filtered",
    component: ProjectsSub,
    beforeEnter: Pr.routeMiddleware
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

router.beforeEach((to, _from, next) => {
  const userLocale = Tr.chooseDefaultLocale();
  Tr.switchLanguage(userLocale);
  next();
});

export default router;

Here's my projects.js:

import Tr from './../../../translation.js'
const languages = Tr.languages
import store from './store';
import router from './routes';

const Projects = {

  filterOptions: { /*filters which I removed because not relevant for this question*/ },

  getFiltersFromUrl(url) {
    const urlParams = url.split('&');
    const conditions = {};
    let currentField = null;
    let conditionValues = [];
    let reformatingRequired = false

    urlParams.forEach(param => {
        const [key, value] = param.split('=');
        if (key.startsWith('field')) {
            if (currentField !== null) {
                conditions[currentField] = conditionValues;
                conditionValues = []; 
            }
            currentField = decodeURIComponent(value);
        } else if (key.startsWith('condition')) {
            const conditionValue = decodeURIComponent(value);
            conditionValues.push(conditionValue);
        } else {
          reformatingRequired = true
        }
    });

    if (currentField !== null) {
        conditions[currentField] = conditionValues;
    }

    const sortedFilters = {};
    Object.entries(conditions).forEach(([field, condition]) => {
        sortedFilters[field] = condition;
    });

    return { sortedFilters, reformatingRequired }
  },

  async isFilterSupported(params) {
    const filtersFromUrl = Projects.getFiltersFromUrl(params)
    const appliedFilters = filtersFromUrl.sortedFilters;
    const existingFilters = { 'lang': [], 'status': [], 'tags': [] }
    let exists = false
    for (const field in appliedFilters) {
      if ((field in Projects.filterOptions)){
        for (const filter in appliedFilters[field]) {
          for (const option in Projects.filterOptions[field]['options']) {
            const value = Projects.filterOptions[field]['options'][option]['value']
            if ((appliedFilters[field][filter] == value) && (value != 'all')) {
              exists = true
              existingFilters[field].push(appliedFilters[field][filter])
            }
          }
        }
      }
    }
    if (!exists) {
      console.log('emergency')
      try {
        await router.push("/projects")
      } catch(e) {
        console.log('&', e)
        router.replace({ params: { filter: '' } })
      }
    } else if (filtersFromUrl.reformatingRequired) {
      Projects.buildUrl(existingFilters)
    } else {
      console.log('b', appliedFilters, exists, existingFilters)
    }
  },

  buildUrl(filters) {
    console.log('a', filters)
  },

  async routeMiddleware(to, _from, next) {
    const paramFilters = to.params.filter
    Projects.isFilterSupported(paramFilters)
    return next()
  },
}
export default Projects

I think that I might just need to call router.push() in another file than the one which is called at beforeEnter. If that's the case could you explain me the reasoning why I can't just import router in projects.js and how I need to call router.push()?