When react compiler is enabled - ERROR: [TypeError: ks is not a function (it is undefined)]

[the-simian]

Describe the bug
Storybook Android:
ERROR [TypeError: ks is not a function (it is undefined)]

To Reproduce
When running the following versions you will get this error on the storybook-mobile build, when the same versions work on storybook-web
package.json

    "@storybook/addon-essentials": "8.6.14",
    "@storybook/addon-ondevice-actions": "^8.6.2",
    "@storybook/addon-ondevice-backgrounds": "^8.6.2",
    "@storybook/addon-ondevice-controls": "^8.6.2",
    "@storybook/addon-ondevice-notes": "^8.6.2",
    "@storybook/core": "8.6.14",
    "@storybook/react": "8.6.14",
    "@storybook/react-native": "^8.6.2",
    "@storybook/react-native-web-vite": "8.6.14",
     "storybook": "8.6.14",

metro.config.ts

const path = require('node:path');
const { getDefaultConfig } = require('expo/metro-config');
const withStorybook = require('@storybook/react-native/metro/withStorybook');
const { getSentryExpoConfig } = require('@sentry/react-native/metro');
const { withNativeWind } = require('nativewind/metro');

const STORYBOOK_ENABLED =
  process.env.STORYBOOK_ENABLED === 'true' || process.env.STORYBOOK_ENABLED === true;

let config = getDefaultConfig(__dirname);

//Note: Including this since I do use Sentry, but removing this makes no difference
if (!STORYBOOK_ENABLED) {
  config = getSentryExpoConfig(__dirname);
}

config = withNativeWind(config, { input: './global.css' });

config = withStorybook(config, {
  enabled: STORYBOOK_ENABLED,
  onDisabledRemoveStorybook: !STORYBOOK_ENABLED,
  configPath: path.resolve(__dirname, './.storybook-mobile'),
});

module.exports = config;

Expected behavior
This issue occurs at runtime, and emmits the 'red screen' React Native Error, instead of loading the storybook instance

Screenshots

Red Screen

System:

Storybook Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (18) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 22.4.0 - ~/.nvm/versions/node/v22.4.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.4.0/bin/yarn
    npm: 10.8.1 - ~/.nvm/versions/node/v22.4.0/bin/npm
    pnpm: 8.15.1 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @storybook/addon-essentials: 8.6.14 => 8.6.14
    @storybook/addon-ondevice-actions: ^8.6.2 => 8.6.2
    @storybook/addon-ondevice-backgrounds: ^8.6.2 => 8.6.2
    @storybook/addon-ondevice-controls: ^8.6.2 => 8.6.2
    @storybook/addon-ondevice-notes: ^8.6.2 => 8.6.2
    @storybook/core: 8.6.14 => 8.6.14
    @storybook/react: 8.6.14 => 8.6.14
    @storybook/react-native: ^8.6.2 => 8.6.2
    @storybook/react-native-web-vite: 8.6.14 => 8.6.14
    @storybook/test: 8.6.14 => 8.6.14
    storybook: 8.6.14 => 8.6.14
    storybook-addon-apollo-client: ^8.1.2 => 8.1.2
    storybook-addon-deep-controls: ^0.9.2 => 0.9.2

Additional context

ks is the minified version of the isStory function from @storybook/core/csf
This function is used in processCSFFile() to validate story exports
Likely cause: Version mismatch between core Storybook packages (8.6.14) and React Native Storybook (8.6.2)
Different versions have incompatible imports/exports, causing isStory to be undefined when called as ks()

Additional Notes
The example boilerplate at https://github.com/dannyhw/expo-router-storybook runs fine, suggesting there's a dependency issue with multiple versions of storybook/core being installed.

[michbil]

For me this issue appears on expo 53 project only when react-compiler is turned on.

[dannyhw]

Maybe theres a way to ignore certain files with the compiler? The react compiler docs suggests that it shouldn't not be run by the end user and should instead be applied by library maintainers when bundling

[dannyhw]

EDIT: tested this and it doesn't work. Seems like the main workaround for now is to just disable the compiler.

You could try something like this to exclude storybook if its an issue.

https://docs.expo.dev/guides/react-compiler/

module.exports = function (api) {
  api.cache(true);

  return {
    presets: [
      [
        'babel-preset-expo',
        {
          'react-compiler': {
            sources: filename => {
              // Match file names to include in the React Compiler.
              return !filename.includes('storybook');
            },
          },
        },
      ],
    ],
  };
};

[the-simian]

there's a chance that isStory is a circular dependency, and is triggering this known issue: expo/expo#35100

[the-simian]

After extensive testing, I found the simplest workaround is to avoid the Babel plugin entirely and use Expo's built-in experiment flag:

// app.config.ts
experiments: {
  typedRoutes: true,
  reactCompiler: !process.env.STORYBOOK_ENABLED, // Disable only for Storybook
  reactCanary: true,
},

As for the babel.config.js, you might as well remove babel-plugin-compiler entirely. I tried testing to exclude storybook, and then to only include some critical files, and eventually to include no files. No matter what even if you set the sources to include no files at all, and you'll still get the error.

[michbil]

Some additional investigation, for storybooks v8.6.7:
I tried to find circular dependency itself, it's between

node_modules/@storybook/core/dist/csf/index.js

and

node_modules/@storybook/core/dist/preview-api/index.js

commenting line 118 in node_modules/@storybook/core/dist/csf/index.js

// import { composeConfigs as M, normalizeProjectAnnotations as N } from "@storybook/core/preview-api";

Makes storybooks work again for me, but probably something will be broken after this change.

[dannyhw]

Hmm well I wonder if that exists in v9 too. I can try and dig into that.

I do still get the error in v9 but might be a different cyclic dep.

[dannyhw]

I have raised this with other maintainers and it should be possible to resolve I will track and update when i know more

[dannyhw]

I think i found the cyclic deps for v9, they are different than the v8 one

its basically if I comment out all these then it goes away

// src/shared/preview/core-annotations.ts
// import ao from 'storybook/internal/component-testing/preview';
// import lo from 'storybook/actions/preview';
// import co from 'storybook/backgrounds/preview';
// import po from 'storybook/highlight/preview';
// import uo from 'storybook/measure/preview';
// import fo from 'storybook/outline/preview';
// import yo from 'storybook/test/preview';
// import mo from 'storybook/viewport/preview';

since they then have imports to preview-api
i.e
storybook/preview-api -> storybook/measure -> storybook/preview-api

[dannyhw]

This pull request is now the one to be tracking for progress on fixing this
storybookjs/storybook#30601

[dannyhw]

This has been very difficult to fix because of the metro bugs. It seems even a package self referencing is causing the same issue. We attempted some workarounds and were unsuccessful.

Seems like its not possible to fix in storybook without massive changes to the way its bundled which is not currently possible.

Our best bet is to work to get the upstream metro/compiler issues resolved

upstream issue can be tracked here facebook/metro#1429