V8 migration issue

[mzaien]

Describe the bug
After upgrading to storybook v8 and updating metro + running storybook-generate the app did not work I got this error
The package at "node_modules/axios/dist/node/axios.cjs" attempted to import the Node standard library module "url". It failed because the native React runtime does not include the Node standard library.

To Reproduce
Steps to reproduce the behavior:

1. upgrade to v8
2. run storybook-generate
3. update metro
4. run yarn storybook EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --dev-client

Expected behavior
our storybook project opens in the simolator

Screenshots

Code snippets

old metro config

const {getSentryExpoConfig} = require('@sentry/react-native/metro');

const defaultConfig = getSentryExpoConfig(__dirname);
defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
    const defaultResolveResult = context.resolveRequest(
        context,
        moduleName,
        platform,
    );

    if (
        (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED !== 'true' &&
            defaultResolveResult?.filePath?.includes?.('.storybook/')) ||
        defaultResolveResult?.filePath?.includes?.('*.stories.tsx')
    ) {
        return {
            type: 'empty',
        };
    }

    return defaultResolveResult;
};

module.exports = defaultConfig;

new metro config

const {getSentryExpoConfig} = require('@sentry/react-native/metro');
const path = require('path');
const withStorybook = require('@storybook/react-native/metro/withStorybook');

const defaultConfig = getSentryExpoConfig(__dirname);

module.exports = withStorybook(defaultConfig, {
    // Use a proper condition to enable Storybook only when the env variable is set to 'true'
    enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
    // Make sure the config path points to the correct Storybook folder
    configPath: path.resolve(__dirname, './.storybook'),
});

System:
Please paste the results of npx -p @storybook/cli@next sb info here.
sh: @storybook/cli@8.4.0-alpha.5: No such file or directory

Additional context
I only have this storybook deps

    "@storybook/addon-ondevice-actions": "^8.3.5",
    "@storybook/addon-ondevice-controls": "^8.3.5",
    "@storybook/react": "^8.3.5",
    "@storybook/react-native": "^8.3.5",

[AdamTyler]

I got by this specific error by using:

config.resolver.unstable_conditionNames: ['browser', 'require', 'react-native'],

in my metro.config.js.

Unfortunately I'm now running into this issue:

[mzaien]

Hey @AdamTyler I did what you have provided and added the babel plugin (as a dev dependancies) and things worked 🚀

[dannyhw]

@AdamTyler does adding the babel plugin in the error message resolve the issue you are having?

[AdamTyler]

@mzaien @dannyhw adding the babel plugin did take care of it!

I originally tried adding it with yarn but forgot to include it in the babel.config

running storybook now is working for me but running my app non storybook gives me this error:

I'm assuming its something to do with my metro.config

[dannyhw]

In some of my examples I had config that would return an empty module for storybook when its not being used, maybe if you remove that it would fix this issue. Or maybe adding defaultResolveResult?.filePath?.includes?.("@storybook")

This type of stuff:

defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
  const defaultResolveResult = context.resolveRequest(
    context,
    moduleName,
    platform
  );

  if (
    process.env.STORYBOOK_ENABLED !== "true" &&
    defaultResolveResult?.filePath?.includes?.(".ondevice/")
  ) {
    return {
      type: "empty",
    };
  }

  return defaultResolveResult;
};

[AdamTyler]

I had a few of those that I commented out. Let me add my current config to make this easier (you can see commented out parts from v7 config). Let me know if anything jumps out at you:

const { getSentryExpoConfig } = require('@sentry/react-native/metro');
const withStorybook = require('@storybook/react-native/metro/withStorybook');
// const { generate } = require('@storybook/react-native/scripts/generate');
const path = require('path');

// Generate the story loader
// if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true') {
//   generate({
//     configPath: path.resolve(__dirname, './.storybook'),
//   });
// }

module.exports = (() => {
  const config = getSentryExpoConfig(__dirname);
  const { resolver } = config;

  config.transformer = {
    ...config.transformer,
    babelTransformerPath: require.resolve('react-native-svg-transformer/expo'),
    unstable_allowRequireContext: true,
  };

  config.resolver = {
    ...config.resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
    resolveRequest: (context, moduleName, platform) => {
      // if (
      //   moduleName === '@storybook/test' ||
      //   moduleName.endsWith('.css')
      // ) {
      //   return { type: 'empty' };
      // }

      const defaultResolveResult = context.resolveRequest(
        context,
        moduleName,
        platform,
      );

      // if (
      //   process.env.EXPO_PUBLIC_STORYBOOK_ENABLED !== 'true' &&
      //   defaultResolveResult?.filePath?.includes?.('.storybook/')
      // ) {
      //   return { type: 'empty' };
      // }

      return defaultResolveResult;
    },
    sourceExts: [...resolver.sourceExts, 'svg'],
    unstable_conditionNames: ['browser', 'require', 'react-native'],
  };

  return withStorybook(config, {
    configPath: path.resolve(__dirname, './.storybook'),
    enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
  });
})();

I thought maybe it was from using getSentryExpoConfig but I swapped that with getDefaultConfig and saw the same error

[dannyhw]

Hmm I guess you may just need package exports enabled

unstable_enablePackageExports

its also added by withStorybook when enabled is true

[AdamTyler]

Hmm I guess you may just need package exports enabled

unstable_enablePackageExports

its also added by withStorybook when enabled is true

This fixed it! Thanks @dannyhw