Nuxt•7mo ago

Prevent a package from being treeshaken/ deleted from final build on production

soo am trying to use pino with axiom, but vite keeps deleting "@axiomhq/pino" package. i even tried to import it, but it is still being deleted how can i pervent that.... ?

11 Replies

Artist201OP•7mo ago

https://github.com/pinojs/pino/issues/1964

GitHub

After building 'unable to determine transport target for "@axiomhq/...

Hello ! thanks for the great package! I have been trying to connect to axiom and send logs. while in development everything works fine. but in deployment I keep receiving the follwoing error unable...

Artist201OP•7mo ago

it seems like Vite is deleting the "cjs" folder while the package is using it which is causing this issue. how to pervent vite from deleting cjs folders ?

Kealanau•7mo ago

Not entirely sure, but i do know with some packages you need to wrap it up in the nuxt build as a list of transpiled packages in your nuxt config. In say the case you want to use https://github.com/zxing/zxing with, you'd want to do in the nuxt.config.ts.

  build: {
    transpile: ['zxing'],
  },

  build: {
    transpile: ['zxing'],
  },

So you may need to do

  build: {
    transpile: ['axiom'],
  },

  build: {
    transpile: ['axiom'],
  },

GitHub

GitHub - zxing/zxing: ZXing ("Zebra Crossing") barcode scanning lib...

ZXing ("Zebra Crossing") barcode scanning library for Java, Android - zxing/zxing

Artist201OP•7mo ago

IT IS WORKING ! 😮 on local build, works fine. on vercel it doesn't works like a charm in local build

js 
  build:{
    transpile: ['@axiomhq/pino'],
  },

js 
  build:{
    transpile: ['@axiomhq/pino'],
  },

seems like vercel is doing some random things in the background when building the project soo... sadly am probably just gonna change pino to winston T_T

Kealanau•7mo ago

is the error the same in vercel?

Artist201OP•7mo ago

yup

Kealanau•7mo ago

hmm, because i was able to uplad a project that uses zxing to vercel with the build transpile thing

Artist201OP•7mo ago

i tried to also redeploy it without using the cache but still same issue it is so weird that it builds fine on my machine but not on vercel

Kealanau•7mo ago

yeah, so this was my project that was then used on vercel

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/content',
    '@nuxt/ui',
    '@nuxthq/studio',
    '@nuxtjs/fontaine',
    '@nuxtjs/google-fonts',
    'nuxt-og-image',
    '@pinia/nuxt',
    '@nuxt/image',
  ],
  
  build: {
    transpile: ['zxing'],
  },
  hooks: {
    // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
    'components:extend': (components) => {
      const globals = components.filter((c) => ['UButton'].includes(c.pascalName))

      globals.forEach((c) => c.global = true)
    }
  },
  ui: {
    icons: ['ic', 'mdi']
  },
  // Fonts
  fontMetrics: {
    fonts: ['DM Sans']
  },
  googleFonts: {
    display: 'swap',
    download: true,
    families: {
      'DM+Sans': [400, 500, 600, 700]
    }
  },
  // Devtools / Typescript
  devtools: { enabled: true },
  typescript: { strict: false }
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/content',
    '@nuxt/ui',
    '@nuxthq/studio',
    '@nuxtjs/fontaine',
    '@nuxtjs/google-fonts',
    'nuxt-og-image',
    '@pinia/nuxt',
    '@nuxt/image',
  ],
  
  build: {
    transpile: ['zxing'],
  },
  hooks: {
    // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
    'components:extend': (components) => {
      const globals = components.filter((c) => ['UButton'].includes(c.pascalName))

      globals.forEach((c) => c.global = true)
    }
  },
  ui: {
    icons: ['ic', 'mdi']
  },
  // Fonts
  fontMetrics: {
    fonts: ['DM Sans']
  },
  googleFonts: {
    display: 'swap',
    download: true,
    families: {
      'DM+Sans': [400, 500, 600, 700]
    }
  },
  // Devtools / Typescript
  devtools: { enabled: true },
  typescript: { strict: false }
})

Artist201OP•7mo ago

so yeah, it is just the build thingi i also tried this

  vite:{
    optimizeDeps:{
      include:['@axiomhq/pino']
    }
  }

  vite:{
    optimizeDeps:{
      include:['@axiomhq/pino']
    }
  }

but same issue anyway i am just leaving pino for now. my biggest issue is that i have to change all instance of my loggings looking like this logger.info({data1,data2},"error message') to this logger.info("error message', {data1,data2}) 🥲 Thank you for your help

Kealanau•7mo ago

what a shame, no problem 🙂

Gaming

Programming

Prevent a package from being treeshaken/ deleted from final build on production