Is it possible to request a local json file with a dynamic path inside a story?

[victorlmneves]

Hi all
I'm trying to load a local JSON file with a dynamic path (because the project handles multiple brands) to populate the component story and tried 2 approaches but none of them seems to work

My first approach

const brand = import.meta.env.VITE_APP_BRAND;
const baseUrl = 'http://127.0.0.1:6006';
const footerItems = await import(`${baseUrl}/assets/mocks/${brand}/footer.json`).then((x) => x.default || x);

But I get this warning

 WARN  8:03:43 PM [vite] warning:                                                                                                                                20:03:43
/Users/victorneves/_code/frontend/histoire/components/structure/TheFooter.story.vue
12 |      const brand = import.meta.env.VITE_APP_BRAND;
13 |      const baseUrl = "http://127.0.0.1:6006";
14 |      const footerItems = ([__temp, __restore] = _withAsyncContext(() => import(`${baseUrl}/assets/mocks/${brand}/footer.json`).then((x) => x.default || x)), __temp = await __temp, __restore(), __temp);
   |                                                                                ^
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis

So I went to this approach

const brand = import.meta.env.VITE_APP_BRAND;
const baseUrl = 'http://127.0.0.1:6006';
const getFooterItems = async () => {
    try {
        const response = await axios.get(`${baseUrl}/assets/mocks/${brand}/footer.json`);
        const footerItems = response.data;
        console.log("🚀 ~ file: TheFooter.story.vue:18 ~ getFooterItems:", footerItems) <--- I get the data

        return footerItems;
    } catch (errors) {
        console.error(errors);
    }
};
const footerItems = await getFooterItems();

But I get these warning on the console and the story is not displayed on the list

Collect stories start TheFooter                                                                                                                                  19:58:12
[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 
  at <TheFooter.story ref="comp" data= {
  id: 'histoire-components-structure-thefooter-story-vue',
  path: '/Users/victorneves/_code/frontend/histoire/components/structure/TheFooter.story.vue',
  relativePath: 'histoire/components/structure/TheFooter.story.vue',
  fileName: 'TheFooter',
  moduleId: '/Users/victorneves/_code/frontend/histoire/components/structure/TheFooter.story.vue',
  supportPluginId: 'vue3',
  virtual: false,
  moduleCode: undefined
} > 
  at <App>
histoire/components/structure/TheFooter.story.vue 1162ms (setup:21ms, execute:0ms, run:1141ms)

 WARN  ⚠️  No story found for /Users/victorneves/_code/frontend/histoire/components/structure/TheFooter.story.vue