yt.platform.match is not a function

[khawrk]

HI I was trying to run storybook with react native ios but whenever I set
if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true") { AppEntryPoint = require("../.storybook").default }

I got yt.platform.match is not a function error

[dannyhw]

@khawrk can you please be more specific? when did you get this error? whats the project? how can I reproduce it?

[khawrk]

Hi @dannyhw I'm running a project in a monorepo using React Native and Expo for mobile app and then Next.js and React and typescript for website. So the structure of the repo is as follows:

root
   -- mobile
         ---./storybook
              ---- index.ts
              ---- main.ts
              ---- preview.tsx
              ---- storybook.requires.ts
         --- app 
              ---- index.tsx (where I'm calling storybook)
         --- entry.ts

   -- website

I installed Storybook in both directories using the command for each framework and Storybook we installed to website directory works perfectly fine. However, I followed the instructions in this blog: https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o for the mobile directory and after I ran pnpm storybook I got errors.

From what I understand, it failed when hitting this index.js file which is located in node_modules/@storybook/core/dist/manager-api/index.js

I attached photos here:

The error occurs in both Ios Simulator and in my connected device

And

it also fails when hitting storybook.requires.ts

This is my current setup:

In "metro.config.js"

const withStorybook = require("@storybook/react-native/metro/withStorybook") module.exports = withStorybook(config)

in "app.config.js"

extra: {
          storybookEnabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED,
           },

Entry.ts

import "@expo/metro-runtime"

import "@/app/polyfills"

import { App } from "expo-router/build/qualified-entry"
import { renderRootComponent } from "expo-router/build/renderRootComponent"

renderRootComponent(App)

in "index.tsx" (Our app entry point and this output constant from app.config.js before running Storybook"

export function Index() {
	... our app rendering logic 
}

let AppEntryPoint = Index

console.log("Constants", Constants.expoConfig?.extra?.storybookEnabled) // it outputs true
if (String(Constants.expoConfig?.extra?.storybookEnabled) === "true") {
	console.log("Using Storybook") // it outputs "Using Storybook" 
	AppEntryPoint = require("../.storybook").default
}
export default AppEntryPoint

in babel.config.js I've added plugin as instructed in this repo

module.exports = (api) => {
	api.cache(true)
	return {
		presets: ["babel-preset-expo"],
		plugins: ["react-native-reanimated/plugin"],
	}
}

Storybook.requires.ts

/* do not change this file, it is auto generated by storybook. */

import { start, updateView } from "@storybook/react-native"
import "@storybook/addon-ondevice-controls/register"
import "@storybook/addon-ondevice-actions/register"

const normalizedStories = [
	{
		titlePrefix: "",
		directory: "./.storybook/stories",
		files: "**/*.stories.?(ts|tsx|js|jsx|mdx)",
		importPathMatcher:
			/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx|mdx)?)$/,
		// @ts-ignore
		req: require.context(
			"./stories",
			true,
			/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx|mdx)?)$/,
		),
	},
	{
		titlePrefix: "",
		directory: "./components",
		files: "**/*.stories.?(ts|tsx|js|jsx|mdx)",
		importPathMatcher:
			/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx|mdx)?)$/,
		// @ts-ignore
		req: require.context(
			"../components",
			true,
			/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx|mdx)?)$/,
		),
	},
]

declare global {
	var view: ReturnType<typeof start>
	var STORIES: typeof normalizedStories
}

const annotations = [
	require("./preview"),
	require("@storybook/react-native/preview"),
	require("@storybook/addon-ondevice-actions/preview"),
]

global.STORIES = normalizedStories

// @ts-ignore
module?.hot?.accept?.()

if (!global.view) {
	global.view = start({
		annotations,
		storyEntries: normalizedStories,
	})
} else {
	updateView(global.view, annotations, normalizedStories)
}

export const view = global.view

I also tried adding console.log to each of file in ./storybook but none displays anything.

[dannyhw]

@khawrk would you be able to provide a reproduction? that would make helping you a lot easier. The things you shared from your project would not be enough to reproduce the problem as far as I can tell.

the isMacLike function is failing because it seems like navigator.platform is defined for you but not navigator.platform.match

const { navigator, document } = global;

export const isMacLike = () =>
  navigator && navigator.platform ? !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) : false;

maybe you have some polyfill that is adding navigator to 'global' normally navigator wouldn't be defined in react native.

perhaps in "@/app/polyfills"

[khawrk]

@dannyhw yeah we have polyfills.ts and we use TextEncoder there

import { TextEncoder, TextDecoder } from "text-encoding"
if (typeof global.TextEncoder === "undefined") {
	global.TextEncoder = TextEncoder
}

if (typeof global.TextDecoder === "undefined") {
	global.TextDecoder = TextDecoder
}

Is this helpful?

[dannyhw]

this doesn't look related, but again to really know what the problem I need a reproduction

[khawrk]

Hey @dannyhw I still cannot get the reproduction done but we solved the error for now by adding this to our polyfill.ts

global.navigator = {
	...global.navigator,
	platform: "iPhone",
	userAgent: "chrome",
}

With this addition we can now switch between app and storybook on mobile