N
Nuxt•4w ago
IsaacR943

Cant make any logger work in a clean nuxt application

I started a vainilla nuxt app and cant make any logger to a file work. The latest I tried was log4js Specs: 
// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n']
})

// package.json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "log4js": "^6.9.1",
    "nuxt": "^3.15.3",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^9.1.3"
  }
}
// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n']
})

// package.json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "log4js": "^6.9.1",
    "nuxt": "^3.15.3",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^9.1.3"
  }
}
Im trying to run the next code: 
// utils/logger.js
import log4js from 'node_modules/log4js';

log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    },
    info: {
      type: "file",
      filename: "./logs/info.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    }
  },
  categories: { 
    default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
  }
});

export const logger = log4js.getLogger("err");

// pages/index.vue
<script setup lang="ts">
// now for script set up
logger.error("Inside the pages index - error");
logger.debug("Inside the pages index - debug");
</script>
<template>
    <div>
        some default value
    </div>
</template>
// utils/logger.js
import log4js from 'node_modules/log4js';

log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    },
    info: {
      type: "file",
      filename: "./logs/info.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    }
  },
  categories: { 
    default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
  }
});

export const logger = log4js.getLogger("err");

// pages/index.vue
<script setup lang="ts">
// now for script set up
logger.error("Inside the pages index - error");
logger.debug("Inside the pages index - debug");
</script>
<template>
    <div>
        some default value
    </div>
</template>
Error: 
500
Cannot find module './configuration' Require stack: - /Users/laptop/Documents/GitHub/tinderData3/app/node_modules/log4js
500
Cannot find module './configuration' Require stack: - /Users/laptop/Documents/GitHub/tinderData3/app/node_modules/log4js
10 Replies
kapa.ai
kapa.ai•4w ago
Hi @IsaacR943. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources and your question, it appears you're encountering an issue related to importing and configuring log4js in a Nuxt 3 application. This error is likely related to a recent change in Nuxt 3.15.3 that affects how certain modules are loaded in development mode. The error you're seeing is similar to issues reported in this GitHub issue and this one. These issues describe problems with importing certain modules after upgrading to Nuxt 3.15.3. To resolve this, you can try the following workaround suggested by a Nuxt team member: 1. Modify your nuxt.config.ts file to include the following configuration: 
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: ['log4js']
    }
  }
})
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: ['log4js']
    }
  }
})
This configuration tells Vite (the build tool used by Nuxt) to include log4js in the server-side rendering bundle. 2. If you're still encountering issues, you might need to wrap this configuration in a development-only condition: 
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: process.env.NODE_ENV === 'development' ? ['log4js'] : []
    }
  }
})
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: process.env.NODE_ENV === 'development' ? ['log4js'] : []
    }
  }
})
This ensures that the noExternal configuration only applies during development. If these solutions don't work, you might want to consider using Nuxt's built-in logger or a different logging library that's more compatible with Nuxt 3's server-side rendering setup. For built-in logging, you can use the useLogger function from @nuxt/kit as described in the Nuxt documentation on logging. Remember that this issue is specific to the development environment. Your production build should work without these modifications. If you continue to face issues, you might want to report this as a potential bug to the Nuxt GitHub repository, following their guidelines for reporting bugs. Citations: GitHub Issue #30749 Nuxt Logging Documentation Nuxt Bug Reporting Guidelines ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@1223715160502571129> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
IsaacR943
IsaacR943OP•4w ago
@kapa.ai now that promps another error in my console: 
500
require is not defined

at http://localhost:3000/_nuxt/utils/logger.js?t=1738028537001:1:16
500
require is not defined

at http://localhost:3000/_nuxt/utils/logger.js?t=1738028537001:1:16
from the code: 
const log4js = require('log4js')

log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    },
    info: {
      type: "file",
      filename: "./logs/info.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    }
  },
  categories: { 
    default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
  }
});

export const logger = log4js.getLogger("err");
const log4js = require('log4js')

log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    },
    info: {
      type: "file",
      filename: "./logs/info.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    }
  },
  categories: { 
    default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
  }
});

export const logger = log4js.getLogger("err");
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- The new error you're encountering is related to the use of require in a module context where it's not defined. This is because Nuxt 3 uses ES modules by default, which don't support require. To resolve this issue, you need to switch to ES module syntax. Here's how you can modify your code: 1. Change your utils/logger.js file to use ES module import: 
import log4js from 'log4js';

log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    },
    info: {
      type: "file",
      filename: "./logs/info.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    }
  },
  categories: { 
    default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
  }
});

export const logger = log4js.getLogger("err");
import log4js from 'log4js';

log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    },
    info: {
      type: "file",
      filename: "./logs/info.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    }
  },
  categories: { 
    default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
  }
});

export const logger = log4js.getLogger("err");
2. Make sure your nuxt.config.ts file includes the configuration we discussed earlier: 
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: ['log4js']
    }
  }
})
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: ['log4js']
    }
  }
})
3. If you're still encountering issues, you might need to explicitly set the type field in your package.json to module: 
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  // ... rest of your package.json
}
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  // ... rest of your package.json
}
These changes should resolve the require is not defined error. However, it's important to note that using file-based logging in a Nuxt application can be problematic, especially in serverless environments or when deploying to platforms that don't provide write access to the filesystem. If you continue to face issues with log4js, you might want to consider using Nuxt's built-in logging capabilities or a logging service that supports cloud-based logging. For more information on ES modules and CommonJS in Nuxt, you can refer to the Nuxt documentation on ES Modules. Nuxt ES Modules Documentation If these changes don't resolve your issue, you may need to create a minimal reproduction of the problem and report it as a potential bug to the Nuxt team, following their bug reporting guidelines. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@1223715160502571129> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
IsaacR943
IsaacR943OP•4w ago
@kapa.ai I did as oyu said. Change the package json: 
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
...
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
...
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: ['log4js']
    }
  }
})
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: ['log4js']
    }
  }
})
// logger.js
import log4js from 'log4js';
log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
....
// logger.js
import log4js from 'log4js';
log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
....
The error now is : 
500
require_util(...).inspect is not a function

at createAppender (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:1834:54)
at getAppender (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:1796:24)
at http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:1865:11
at Array.forEach ()
at setup (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:1863:37)
at http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:727:39
at Array.forEach ()
at Object.configure (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:727:17)
at Object.configure (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:2716:21)
at http://localhost:3000/_nuxt/utils/logger.js?t=1738028632765:2:8
500
require_util(...).inspect is not a function

at createAppender (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:1834:54)
at getAppender (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:1796:24)
at http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:1865:11
at Array.forEach ()
at setup (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:1863:37)
at http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:727:39
at Array.forEach ()
at Object.configure (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:727:17)
at Object.configure (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/log4js.js?v=46045050:2716:21)
at http://localhost:3000/_nuxt/utils/logger.js?t=1738028632765:2:8
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing the updated information and the new error message. It seems that the issue persists, but now we're encountering a different problem related to the log4js library's compatibility with the client-side environment in Nuxt. The error message suggests that log4js is trying to use Node.js-specific functionality (util.inspect) which is not available in the browser environment. This is because log4js is primarily designed for server-side usage, and Nuxt is trying to run it on the client side as well. To resolve this issue, we need to ensure that log4js is only used on the server side. Here's how you can modify your setup: 1. First, rename your utils/logger.js file to utils/logger.server.js. The .server suffix tells Nuxt that this file should only be used on the server. 2. Modify your utils/logger.server.js file: 
import log4js from 'log4js';

if (process.server) {
  log4js.configure({
    appenders: {
      err: {
        type: "file",
        filename: "./logs/errors.log",
        layout: {
          type: "pattern",
          pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
        }
      },
      info: {
        type: "file",
        filename: "./logs/info.log",
        layout: {
          type: "pattern",
          pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
        }
      }
    },
    categories: { 
      default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
    }
  });
}

export const logger = process.server ? log4js.getLogger("err") : console;
import log4js from 'log4js';

if (process.server) {
  log4js.configure({
    appenders: {
      err: {
        type: "file",
        filename: "./logs/errors.log",
        layout: {
          type: "pattern",
          pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
        }
      },
      info: {
        type: "file",
        filename: "./logs/info.log",
        layout: {
          type: "pattern",
          pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
        }
      }
    },
    categories: { 
      default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
    }
  });
}

export const logger = process.server ? log4js.getLogger("err") : console;
3. In your nuxt.config.ts, keep the changes you made: 
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: ['log4js']
    }
  }
})
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  vite: {
    ssr: {
      noExternal: ['log4js']
    }
  }
})
4. When using the logger in your components or pages, you should now use it inside a server-only block: 
<script setup>
import { logger } from '~/utils/logger.server'

if (process.server) {
  logger.error("This is a server-side error log")
  logger.debug("This is a server-side debug log")
}
</script>
<script setup>
import { logger } from '~/utils/logger.server'

if (process.server) {
  logger.error("This is a server-side error log")
  logger.debug("This is a server-side debug log")
}
</script>
These changes should resolve the issue by ensuring that log4js is only used on the server side. On the client side, it will fall back to using the console for logging. However, it's worth noting that using file-based logging in a Nuxt application can still be problematic, especially when deploying to serverless environments or platforms that don't provide write access to the filesystem. If you continue to face issues or if you need a logging solution that works seamlessly across both server and client, you might want to consider using Nuxt's built-in logging capabilities or a cloud-based logging service that's compatible with both server and client-side JavaScript. For more information on server-only usage in Nuxt, you can refer to the Nuxt documentation on server-only composables. If these changes don't resolve your issue, you may need to create a minimal reproduction of the problem and report it as a potential bug to the Nuxt team, following their bug reporting guidelines. Nuxt Server-Only Composables Documentation Nuxt Bug Reporting Guidelines ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@1223715160502571129> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Mittchel
Mittchel•4w ago
when try to log to db 🙂 if you have one
IsaacR943
IsaacR943OP•4w ago
Update: I found out that the logger is only available for server directory - its pointless trying to log the front end or composables The instructions above to add a library to the server and use something like a logger.server.ts file works, only for the server tho Yes, i guess could write to a db each log instead of a file. However I will later connect a cron job to read any errors in the code - for that purpose writing to a db is no good. Cron jobs from uptime robot / cronitor can only read files

Did you find this page helpful?