Can't navigate with the compiled version of histoire

[hugoattal]

I have no problem when developing histoire, but when I use it on my project, I get this error when I want to navigate:

This should be availabe was according to the doc 🤔 (+ it passed cypress tests) https://vitejs.dev/guide/env-and-mode.html
https://github.com/histoire-dev/histoire/blob/main/packages/histoire/src/client/app/router.ts#L3-L4

---

Here's what the compiled file looks like...

[Akryum]

Hmm we don't have this issue on our examples in production. 🤔

[hugoattal]

Yes, I don't understand why I'm having this... I'm investigating it.

[hugoattal]

Seems this bug only show when I export a setupVue3 function in my setup file 🤔 (even if it's empty)

EDIT: Actually, it's not even totally that... Seems it depends on the content of my setup file, even if I don't export a setupVue3 function

EDIT2: It actually depends on that import:

import { defineSetupVue3 } from 'histoire/client'

Without it, there's no problem!

[hugoattal]

I spend the last two hours on this and I have no idea where does it come from 😕... Seems like Vite convert this:

import { createRouter, createWebHistory } from 'vue-router';
// @ts-expect-error env not defined
export const base = import.meta.env.BASE_URL;
export const router = createRouter({
    history: createWebHistory(base),

to this

// ../../node_modules/.pnpm/file+..+histoire+packages+histoire_nqcd5hyezk7xu2dwelgfmciih4/node_modules/histoire/dist/client/app/router.js
var import_meta = {};
var base = import_meta.env.BASE_URL;
var router = createRouter({
  history: createWebHistory(base),

inside the node_modules/.vite/deps/histoire_client.js file

Here's a minimal repro: https://github.com/hugoattal/histoire-bug

@Akryum Could you take a quick look if you have any idea?

[Akryum]

I'll take a look 👀

[Akryum]

I didn't reproduce on linux:

[Akryum]

[hugoattal]

Why is it always on Windows that there are some weird stuff happening 😅...

Thanks for looking, I'll try to solve this. That also might be a Vite bug.

[Akryum]

Could you try putting import.meta.env.BASE_URL in the actual code and build the vite app?

[hugoattal]

@Akryum Just to explain the problem a little better:

---

Here's the content of router.ts
histoire/packages/histoire/src/client/app/router.ts

// @ts-expect-error env not defined
export const base = import.meta.env.BASE_URL

---

Here's the file built with pnpm run build on the histoire package
histoire/packages/histoire/dist/client/app/router.js

// @ts-expect-error env not defined
export const base = import.meta.env.BASE_URL;

---

What is served by vite when doing pnpm run story:dev on examples/vue3
http://localhost:3000/@fs/D:/Library/Projects/histoire/packages/histoire/dist/client/app/router.js

import.meta.env = {"BASE_URL":"/","MODE":"development","DEV":true,"PROD":false,"SSR":false};import { createRouter, createWebHistory } from '/node_modules/.vite/deps/vue-router.js?v=86493c02';
// @ts-expect-error env not defined
export const base = import.meta.env.BASE_URL;

---

What is served by vite when doing pnpm run story;dev on another project where I installed histoire is the same thing
http://localhost:3001/node_modules/.pnpm/[email protected]_xhpwbmdaa2vm3qs36nmkicclpa/node_modules/histoire/dist/client/app/router.js

import.meta.env = {"BASE_URL":"/","MODE":"development","DEV":true,"PROD":false,"SSR":false};import { createRouter, createWebHistory } from '/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-router/dist/vue-router.esm-bundler.js?v=3ff50232';
// @ts-expect-error env not defined
export const base = import.meta.env.BASE_URL;

---

But when I click on a story, it triggers this on my console and reload the page

22:59:09 [vite] ✨ new dependencies optimized: histoire/client
22:59:09 [vite] ✨ optimized dependencies changed. reloading

And then it serves a big file called histoire_client.js, which contains this
http://localhost:3001/node_modules/.vite/deps/histoire_client.js?v=3ff50232

// node_modules/.pnpm/[email protected]_xhpwbmdaa2vm3qs36nmkicclpa/node_modules/histoire/dist/client/app/router.js
var import_meta = {};
var base = import_meta.env.BASE_URL;

And THIS is the thing that causes the bug

---

To sum up, I think the optimization step of Vite might generate a faulty file, but I have no idea how it works, so I may be wrong.

I suggest adding a question mark here to solve the bug

export const base = import.meta.env?.BASE_URL;

This generates this (as histoire_client.js) which works on my end:

var import_meta = {};
var _a;
var base = (_a = import_meta.env) == null ? void 0 : _a.BASE_URL;

Wdyt?