Expo/monorepo/web error - Module parse failed - You may need an additional loader ...

[wickedst]

Hi there, I am attempting to set up storybook inside an expo monorepo (set up the recommended way as per the expo docs). I've set up storybook inside projects/storybook using the steps from these docs. Running web mode at this point works, however when moving the components to packages/design-system I get the error below. Thanks!

ERROR in ../../node_modules/design-system/components/Button.tsx 4:42
Module parse failed: Unexpected token (4:42)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import { TouchableOpacity, Text } from "react-native";
| 
> export const MyButton = ({ onPress, text }: { onPress: any; text: any }) => {
|   return (
|     <TouchableOpacity onPress={onPress} activeOpacity={0.8}>

To Reproduce Steps to reproduce the behavior:

1. Follow instructions for setting up an expo monorepo
2. yarn create expo-app projects/storybook
3. cd projects/storybook && npx sb@next init --type react_native
4. Follow steps to set up storybook from these docs
5. Set up design system in <root>/projects/design-system
6. Change .storybook/main.js stories to stories: ["../../../packages/design-system/**/*.stories.?(ts|tsx|js|jsx)"], (This is the correct path as evidenced by the error picking up the jsx
7. run yarn sb-rn-get-stories && expo start --web, see the error above

[dannyhw]

@wickedst you probably just need to add ../../../packages/design-system to your metro watch folders

[wickedst]

Hi @dannyhw thanks for the quick response, I forgot to mention I had done that as per the expo docs

// Learn more https://docs.expo.dev/guides/monorepos
const { getDefaultConfig } = require("expo/metro-config");
const path = require("path");

// Find the project and workspace directories
const projectRoot = __dirname;
// This can be replaced with `find-yarn-workspace-root`
const workspaceRoot = path.resolve(projectRoot, "../..");

const config = getDefaultConfig(projectRoot);

// 1. Watch all files within the monorepo
config.watchFolders = [workspaceRoot];
// 2. Let Metro know where to resolve packages and in what order
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, "node_modules"),
  path.resolve(workspaceRoot, "node_modules"),
];
// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
config.resolver.disableHierarchicalLookup = true;

// add storybook stuff - https://github.com/storybookjs/react-native
config.resolver.resolverMainFields.unshift("sbmodern");

module.exports = config;

[wickedst]

Hey, I've confirmed this is an issue with my general setup, and not storybook react native. I'll post an update if I manage to solve