Unable to load Storybook with i18n yaml file

[doutatsu]

We are integrating i18n for vue and vite, using these libraries:
https://vue-i18n.intlify.dev/
https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n

While the app works fine, when we try to run storybook, everything breaks.
I keep getting this error: SyntaxError: Unexpected token ':', which suggests it just unable to read the file properly? I've tried various steps to use babel and transform yml files, but to no avail

Here are configuration files:

preview.js

import { app } from '@storybook/vue3';
import router from '@/router/index';
import { createPinia } from 'pinia';
import { i18n } from '@/i18n.js';

import '@/stylesheets/index.scss';

const routerInstance = router();
const storeInstance = createPinia();

app.use(routerInstance);
app.use(storeInstance);
app.use(i18n);

export const globalTypes = {
  storyBookRouter: routerInstance,
  storyBookStore: storeInstance,
};

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

storybook main.js

const { resolve } = require('path');
const { mergeConfig } = require('vite');

module.exports = {
  'framework': "@storybook/vue3",
  'core': { 'builder': "@storybook/builder-vite", disableTelemetry: true },
  'features': { 'storyStoreV7': true },
  async viteFinal(config, { configType }) {
    configType === 'DEVELOPMENT' &&
    (config.optimizeDeps.include = [
      ...(config.optimizeDeps?.include ?? []),
      "@heroicons/vue/solid",
      "@heroicons/vue/outline",
      "chart.js",
      "vue-router",
      "vue-chartjs",
    ]);

    return mergeConfig(config, {
      resolve: {
        alias: [{ find: '@', replacement: resolve(__dirname, '..', 'src') }],
      },
    });
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
}

vite.config

import { fileURLToPath, URL } from 'node:url';
import path from 'path';
import vueI18n from '@intlify/vite-plugin-vue-i18n';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './src/locales/**'),
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@tests': fileURLToPath(new URL('./tests', import.meta.url)),
    },
  },
  test: {
    environment: 'happy-dom',
    globals: true,
    setupFiles: ['./tests/setup.js'],
    coverage: {
      reporter: ['text', 'lcov'],
    },
  },
});

i18n.js

import { createI18n } from 'vue-i18n';
import en from '@/locales/en.yml';

export const i18n = createI18n({
  locale: 'en',
  messages: {
    en,
  },
});

[IanVS]

Thanks for the report. Would you be willing to create a reproduction that shows the issue?

[doutatsu]

@IanVS Not sure how to reproduce it with Storybook specifically - it works fine in Vue, but how would I go about having a storybook reproduction? Should I make a build with it not working and post here?

[IanVS]

Normally the easiest way is to create a new project using npm create vite@latest, set up the project similar to your own (enough to show the issue), and run npx sb init to add storybook. Then, add a story, or whatever is needed to trigger the error, push it up to github, and share the link.

[doutatsu]

I haven't had a chance to reproduce it due to being busy, but I am going to try and upgrade to the new Storybook version, that syncs Vite config now, which might fix this (?). If not, I'll go back to trying to reproduce