Error Cannot find module 'static/js/custom-theme.js' even with 'import customTheme from "static/js/custom-theme.js'

Question

I want to override the Chakra theme with my own custom theme, so i followed every steps mentioned here.

here's the error i'm facing:

user@ MBPuser ❌ 1 ~/Projets/project_nuxtjs >npm run dev

> [email protected] dev
> nuxt


 FATAL  Cannot find module 'static/js/custom-theme.js'                                                                                                                                                                                                                      17:04:54
Require stack:
- /Users/user/Projets/project_nuxtjs/nuxt.config.js

  Require stack:
  - nuxt.config.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:939:15)
  at Function.resolve (node:internal/modules/cjs/helpers:108:19)
  at _resolve (node_modules/jiti/dist/jiti.js:1:192796)
  at jiti (node_modules/jiti/dist/jiti.js:1:195025)
  at nuxt.config.js:1:205
  at jiti (node_modules/jiti/dist/jiti.js:1:196506)
  at Object.loadNuxtConfig (node_modules/@nuxt/config/dist/config.js:1082:15)
  at loadNuxtConfig (node_modules/@nuxt/cli/dist/cli-index.js:338:32)
  at NuxtCommand.getNuxtConfig (node_modules/@nuxt/cli/dist/cli-index.js:463:26)
  at Object._listenDev (node_modules/@nuxt/cli/dist/cli-dev.js:75:30)


   ╭─────────────────────────────────────────────────────────────────────╮
   │                                                                     │
   │   ✖ Nuxt Fatal Error                                                │
   │                                                                     │
   │   Error: Cannot find module 'static/js/custom-theme.js'             │
   │   Require stack:                                                    │
   │   - /Users/user/Projets/project_nuxtjs/nuxt.config.js               │
   │                                                                     │
   ╰─────────────────────────────────────────────────────────────────────╯

here's is my ../static/js/custom-theme.js :

//  custom-theme.js
export default {
  breakpoints: ['30em', '48em', '62em', '80em'],
  fonts: {
    heading: '"Avenir Next", sans-serif',
    body: 'system-ui, sans-serif',
    mono: 'Menlo, monospace'
  },
  colors: {
    brand: {
      50: '#daffff',
      100: '#b1fbfb',
      200: '#85f7f7',
      300: '#58f3f3',
      400: '#31f0f0',
      500: '#1ed7d7',
      600: '#0ca7a7',
      700: '#007777',
      800: '#004949',
      900: '#001a1a',
    }
  },
}

here's my ../nuxt.config.js :

import customTheme from 'static/js/custom-theme.js' /**<-----MY IMPORT RIGHT HERE*/
export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'CRYPTO_nuxtjs',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/sass/bulma/crypto.scss'}
    ]
  },
  chakra: {
    extendTheme: customTheme, /**<----- MY CUSTOM THEME OBJECT PASSED*/
    config: {
      /**
       * Setting this value to false disables
       * component auto-import in your Vue templates
       * @type {Boolean}
       **/
      autoImport: true
    }
  },

  // nuxt.config.js
  serverMiddleware: [
    '~/api/index.js',
    //
    '~/middleware/redirect.js'
  ],

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'bulma'
  ],


  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/chakra
    '@chakra-ui/nuxt',
    // https://go.nuxtjs.dev/emotion
    '@nuxtjs/emotion',
    //
    '@nuxtjs/router-extras',
    //
    '@nuxtjs/axios',
    //
    '@nuxtjs/auth',

    '~/static/js/custom-theme.js'

  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

Im still very new to nuxt.js using chakra and custom theme, so I might apprieciate some help.

Thanks, Best regards, Hugo,