Currently, I am working on developing a Vue 3 library with TypeScript. We are using Rollup for bundling the library. Everything works as expected within the library itself. However, after packing and installing it in another application, we noticed that the class names are different and issues arise with functionalities like instanceof not working correctly anymore. To investigate this issue, I created a sample function that logs some information. Upon inspecting the logs, I observed that the class name appears strange and 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 the library -> all correct:
TypeName ZodString
ZodString.name ZodString
ZodString [class ZodString extends ZodType] { create: [Function (anonymous)] }
Logs in the app where the library is installed -> unusual class name:
TypeName ZodString
ZodString.name $i
ZodString [class $i extends wt] { create: [Function (anonymous)] }
It seems like the class names or types from Zod are getting an alias name, making it impossible to use instanceof or check for equal type names. Could there be something missing in vite.config.ts?
Here is the 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',
},
},
},
}