Fail to load correct export variant in react native

Hi!

I'm trying to setup this add-on in React Native project. But when I try to connect to dev server I get this error: Invariant Violation: [MSW] Failed to executesetupWorkerin a non-browser environment. Consider usingsetupServerfor Node.js environment instead., js engine: hermes

Which seems like my bundler choses wrong export option.

Here are my specs:

"dependencies": {
    "@gorhom/bottom-sheet": "^4",
    "@react-native-community/geolocation": "^3.2.0",
    "@react-native-community/netinfo": "^11.3.1",
    "@react-navigation/material-top-tabs": "^6.6.13",
    "@react-navigation/native": "^6.1.10",
    "@react-navigation/native-stack": "^6.9.18",
    "@tanstack/react-query": "^5.22.2",
    "axios": "^1.6.7",
    "fast-text-encoding": "^1.0.6",
    "lucide-react-native": "^0.376.0",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-audio-recorder-player": "^3.6.6",
    "react-native-gesture-handler": "^2.16.0",
    "react-native-haptic-feedback": "^2.2.0",
    "react-native-mmkv": "^2.12.2",
    "react-native-pager-view": "^6.3.0",
    "react-native-reanimated": "^3.8.1",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-native-svg": "14.1.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-toast-message": "^2.2.0",
    "react-native-udp": "^4.1.7",
    "react-native-unistyles": "^2.3.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-uuid": "^2.0.2",
    "zod": "^3.22.4"

"devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@biomejs/biome": "1.5.3",
    "@faker-js/faker": "^8.4.1",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/datetimepicker": "^8.0.0",
    "@react-native-community/slider": "^4.5.2",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@storybook/addon-ondevice-actions": "^7.6.18",
    "@storybook/addon-ondevice-controls": "^7.6.18",
    "@storybook/react-native": "^7.6.18",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-loader": "^8.3.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "husky": "^9.0.11",
    "jest": "^29.6.3",
    "msw": "^2.2.14",
    "msw-storybook-addon": "^2.0.0",
    "orval": "^6.25.0",
    "pinst": "^3.0.0",
    "react-dom": "18.2.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-version": "^4.0.0",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },

metro.config.js

const path = require("path");
const { generate } = require("@storybook/react-native/scripts/generate");

generate({
  configPath: path.resolve(__dirname, "./.storybook"),
});

const defaultConfig = getDefaultConfig(__dirname);

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    unstable_allowRequireContext: true,
  },
  resolver: {
    sourceExts: [...defaultConfig.resolver.sourceExts, "mjs"],
  },
};

const mergedConfig = mergeConfig(defaultConfig, config);

module.exports = mergedConfig;

.storybook/preview.tsx

import type { Preview } from "@storybook/react";
import "./msw.polyfills";
import { initialize, mswLoader } from "msw-storybook-addon";

initialize();

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  loaders: [mswLoader],
};

export default preview;

mswjs / msw-storybook-addon

Fail to load correct export variant in react native #149