Strange class name after npm pack

Question

I am currently creating an vue 3 libary with typescript. We're using rollup for bundling. In the library itself all is working as expected. After the packing and installation in another app the class names are different and for example instanceof isn't working correctly anymore. I created a sample function which logs some stuff out. In that logs i saw that the class name looks strange an completely different in the app.

import { ZodString } from 'zod'

export const logZodString = (zodTypeFromApp: ZodString) => {
  console.log('TypeName', zodTypeFromApp._def.typeName)
  console.log('ZodString.name', ZodString.name)
  console.log('ZodString', ZodString)
}

The function will be called like:

logZodString(z.string())

Logs in libary -> all good:

TypeName ZodString
ZodString.name ZodString
ZodString [class ZodString extends ZodType] { create: [Function (anonymous)] }

Logs in app which installs the library -> strange class name:

TypeName ZodString
ZodString.name $i
ZodString [class $i extends wt] { create: [Function (anonymous)] }

Looks like that the class names or types from zod get a kind of alias name and then it's impossible to use instanceof or check for equal type name. Maybe i missed something in vite.config.ts?

build property from vite.config.ts:

 build: {
    target: 'esnext',
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'mylib',
      fileName: format => `mylib.${format}.js`,
    },
    rollupOptions: {
      external: ['vue', 'pinia'],
      output: {
        inlineDynamicImports: true,
        globals: {
          vue: 'Vue',
          pinia: 'Pinia',
        },
      },
    },
  }

Answer 1

I fixed it by adding zod to alias and rollupOptions.

vite.config.ts:

  resolve: {
    alias: {
      pinia: 'pinia/dist/pinia.esm-browser.js',
      zod: 'zod/dist/zod.esm-browser.js',
    },
  },
  build: {
    target: 'esnext',
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'mylib',
      fileName: format => `mylib.${format}.js`,
    },
    rollupOptions: {
      external: ['vue', 'pinia', 'zod'],
      output: {
        inlineDynamicImports: true,
        globals: {
          vue: 'Vue',
          pinia: 'Pinia',
          zod: 'Zod',
        },
      },
    },
  },