Text is undefined and 'Missing helper: "__" '

[swap1789]

I am getting 'undefined' for the text when checked inside storybook. And it throws 'Missing helper: "__" ' error when I try to run the local dev server ?
I used npm i handlebars-i18n to install the required dependencies and in my js file I have imported them as follows. Please let me know if I am missing something

import 'handlebars';
import i18next from 'i18next';
import HandlebarsI18n from 'handlebars-i18n';

HandlebarsI18n.init();
const initialize = () => {
i18next.init({
resources: {
en: {
translation: {
phrase1: 'What is good?',
phrase2: '{{thing}} is good.',
},
},
de: {
translation: {
phrase1: 'Was ist gut?',
phrase2: '{{thing}} ist gut.',
},
},
},
lng: 'en',
});
};

document.addEventListener('DOMContentLoaded', initialize);

[chrwlk]

I also had the problem of getting undefined for all translations within tests with Vitest. I was able to solve it by passing i18next.

  i18next.init({
    resources: {
      en: {
        translation: {
          phrase1: 'What is good?',
          phrase2: '{{thing}} is good.',
        },
      },
    },
    lng: "en",
  });

  handlebarsI18n.init(undefined, i18next);