Using build stub for vite playground

[lucafanselau]

Hi, I have been developing a react hook library based on the ts-starter by antfu. To have a better DX I have essentially created a playground vite application next to the actual source so that I can test the hooks using HMR on a demo website (at least in theory). The advertised approach to using unbuild is to use the --stub flag (if I am not mistaken).

The problem that I am facing now is that the jiti import in the stub cannot be resolved when imported in bundled code [vite] Internal server error: Failed to resolve import jiti from "file:///Users/[...]/node_modules/.pnpm/[email protected]/node_modules/jiti/lib/index.js";

This makes sense to me, as that is code that is bundled and shipped to the browser and therefore the import fails. (Btw when importing the stub from a non-bundled code (like in vite.config.ts) everything works fine). As I feel like this is a pretty common use case though I am wondering what solutions are possible in this scenario.

This issue has also been reported in some other issues like #35 but I have not been able to find a solution there. Additionally in other projects that I found on GitHub using the stub feature, for example, unocss, the stubs are typically consumed in config files.

If I am not mistaken there is no active watch mode for unbuild and I would have to re-enter "pnpm build" on every code change, right? Is there some way to make the stub work with code that gets bundled or would that be an issue related to vite specifically?

Thanks already for any feedback or pointers and also thanks for the great tooling^^

[huang-julien]

hi i went through the same issue. You can change the vite config file to set an alias :

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), Components({
    resolvers: [NaiveUiResolver()]
  })],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': path.resolve(__dirname, "./"),
      "pacakge-s1": path.resolve(__dirname, './../packages/package-1/src'),
      "package-2": path.resolve(__dirname, './../packages/package-2/src')
    }
  },
})

[wobsoriano]

@huang-julien while this works, it defeats the purpose of stubbing the module 😆

[huang-julien]

@huang-julien while this works, it defeats the purpose of stubbing the module 😆

Yes 😂 but this was the only "workaround" I found

[wobsoriano]

True. Hard to use the stub mode in pnpm workspaces.

[sadeghbarati]

Tested in npm workspaces with Windows and macOS

it has the same problem, idk if it's related to normalizePath or it's related to the way the projects are linked through monorepo

[pi0]

It would be a nice idea to support stub mode in testing environments. It might need to be implemented from jiti let's track it via unjs/jiti#150