[React 19] Unable to get stories. Try adding `import 'loki/configure-react'` to your .storybook/preview.js file.

[LLEGIT]

I'm currently blocked in the setup phase of Loki, my Storybook is running without errors and I added to my preview.ts file the line import 'loki/configure-react' to attempt fixing the error :
Unable to get stories. Try adding import 'loki/configure-react' to your .storybook/preview.js file.

I don't have dependencies in the project, only devDependencies.

  "devDependencies": {
    "@chromatic-com/storybook": "4.1.1",
    "@storybook/addon-a11y": "9.1.3",
    "@storybook/addon-designs": "10.0.2",
    "@storybook/addon-docs": "9.1.3",
    "@storybook/addon-links": "9.1.3",
    "@storybook/addon-onboarding": "9.1.3",
    "@storybook/react": "9.1.3",
    "@storybook/react-vite": "9.1.3",
    "loki": "0.35.1",
    "react": "19.1.1",
    "react-dom": "19.1.1",
    "storybook": "9.1.3",
    "storybook-design-token": "4.1.0"
  }

Here is my loki.config.js file

module.exports = {
  chromeSelector: '#my-decorator > *',
  configurations: {
    'chrome.laptop': {
      target: 'chrome.app',
      width: 1366,
      height: 768,
    },
    'chrome.iphone7': {
      target: 'chrome.docker',
      preset: 'iPhone 7',
    },
    'chrome.a4': {
      target: 'chrome.aws-lambda',
      preset: 'A4 Paper',
    },
    ios: {
      target: 'ios.simulator',
    },
    android: {
      target: 'android.emulator',
    },
  },
};

My .storybook folder consists of these files :

• main.ts
• manager.ts
• preview-body.html
• preview-head.html
• preview.ts

I already tried converting .ts files in pure javascript but it doesn't change the outcome. Did someone encounter the same problem on his/her project ?

[AlexAtHome]

I've run into the same issue with a new NX repo with Storybook 9 (except I'm using Angular instead of React).
It seems to get into Storybook's /iframe.html just fine, but it fails to access its API

At node_modules/@loki/browser/src/get-stories.js:8, it fails the check for window.__STORYBOOK_PREVIEW__.storyStore.raw, thus throwing this error. A few lines below, it even explicitly says that storyStore.raw will be removed in v9, and now it's removed

    // Deprecated, will be removed in V9
    const stories = window.__STORYBOOK_PREVIEW__.storyStore.raw();

It appears that you won't be able to use Loki with Storybook v9 until someone adds its support

[Anxhul10]

Initially I got the same error , right now it doesnt work with storybook version >= 9 , you could use a patch to fix this.

[LLEGIT]

Thanks for the information !

[redabacha]

i've created a workaround for this by monkey patching the storybook globals to behave the way it did in earlier versions (as i didn't want to patch loki), add this code to your storybook config:

previewHead: (head) => `
  <script>
    Object.defineProperty(window, "__STORYBOOK_PREVIEW__", {
      configurable: true,
      enumerable: true,
      set(preview) {
        const originalExtract = preview.extract.bind(preview);
        let extractedStories = [];
        preview.extract = async () => {
          await preview.ready();
          const stories = await originalExtract();
          extractedStories = Object.values(stories);
          return stories;
        };
        Object.defineProperty(preview, "storyStoreValue", {
          configurable: true,
          enumerable: true,
          set(storyStore) {
            storyStore.raw = () => extractedStories;
            Object.defineProperty(preview, "storyStoreValue", {
              configurable: true,
              enumerable: true,
              writable: true,
              value: storyStore,
            });
          },
        });
        Object.defineProperty(preview, "storyStore", {
          configurable: true,
          enumerable: true,
          get() {
            return preview.storyStoreValue;
          },
        });
        Object.defineProperty(window, "__STORYBOOK_PREVIEW__", {
          configurable: true,
          enumerable: true,
          writable: true,
          value: preview,
        });
      },
    });
  </script>
  ${head}
`,