I would like to import the functions I have created (like Date.prototype.add, ...) into Nuxt 3

Question

I created a submodule called "date.js" and put all my prototype functions in it, including Date.prototype.add, Date.prototype.format, etc. My functions are located in the file: modules/date/dist/index.js. So far, I had added the following to my package.json:

"dependencies": {
    "date": "file:modules/date"
}

And I imported it in my layout, using import "date", it works perfectly in dev. However, when I try to build and go to a page that uses a function I created, and then refresh the page, it says that the function does not exist.

I'm not sure if the problem is with the importation or if the file is in the right place.

I tried moving the file to different locations, such as 'composables,' 'utils,' and 'helpers.' I also tried exporting it as export default Date. I tried putting the function directly in the view, and it works very well, but I would need to duplicate the code everywhere, which is not ideal.

My project is Laravel for the backend and nuxt for the front:

| - app 
| - boostrap 
| - client ( nuxt app ) 
| - config 
| - database 
| - lang 
| - modules
| | - date 
|   | - src
|   | - dist
| - node_modules 
| - public 
| - routes 
| - server 
| - storage

My package.json for the main project :

{
  "name": "station-donnees",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "npx prettier --write client/",
  },
  "devDependencies": {
    "@types/node": "^18.16.19",
    "flowbite": "^1.7.0",
    "lint-staged": "^14.0.0",
    "nuxt": "^3.7.3",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "sass": "^1.63.6",
    "tailwindcss": "^3.3.3"
  },
  "dependencies": {
    "date": "file:modules/date"
  },
  "lint-staged": {
    "client/**/*.{vue,js,css,scss,ts}": "prettier --write"
  }
}

My nuxt config:

export default defineNuxtConfig({
  srcDir: "client/",
  typescript: {
    strict: true,
  },
  app: {
    head: {
      title: process.env.npm_package_name || "",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        {
          hid: "description",
          name: "description",
          content: process.env.npm_package_description || "",
        },
      ],
      htmlAttrs: {
        lang: "fr",
      },
      link: [
        { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      ],
    },
  },
  css: ["~/assets/css/main.scss"],
  postcss: {
    plugins: {
      tailwindcss: {},
    },
  },
  runtimeConfig: {
    public: {
      webURL: process.env.WEB_URL || "http://localhost:3000",
      apiURL: process.env.API_URL || "http://localhost:8000",
    },
  },
});

my package.json of date modules is :

{
  "name": "date",
  "type": "module",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "test": "jest",
    "build": "babel --extensions .ts --ignore src/*.test.ts ./src -d ./dist",
  },
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@babel/preset-typescript": "^7.22.5",
    "@types/jest": "^29.5.2",
    "babel-jest": "^29.5.0",
    "jest": "^29.5.0",
  }
}

I created a page called bar

<template>
  <div>
    <h1>bar page</h1>
    <input type="text" v-model="date" />
  </div>
</template>

<script lang="ts" setup>
const date = ref("");
date.value = new Date().format("YYYY");
</script>

The bug only occurs when I refresh the browser on a page that uses the module, as if the module's loading is delayed or not happening.