expo: Expo SDK 49 web (with metro) not working with react-hook-form

I added the following line to my metro.config.ts to resolve this:

config.resolver.sourceExts = [...config.resolver.sourceExts, "mjs", "cjs"];

The whole thing:

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

const config = getDefaultConfig(__dirname);

// Remove all console logs in production...
config.transformer.minifierConfig.compress.drop_console = true;
config.resolver.sourceExts = [...config.resolver.sourceExts, "mjs", "cjs"];
module.exports = config;

We have added mjs support in Expo SDK 50, this should resolve the issue.

Is there a fix for this for React Native Web? It’s working for native, but it won’t compile for web, giving the error: "Web Bundling failed Unable to resolve “react-hook-form” from “path\to\file\SignInScreen.tsx” "

I can’t upgrade to Expo SDK 50 right now since it caused other issues in the project.

Were you able to fix this, @Hiba-Bazerbashi ?

@Hiba-Bazerbashi @hadiDanial Can you post your metro.config.js? I have a project on SDK49 and using expo web (expo-router/metro based) and the solution provided at the top of this issue works for me. Here is my metro.config.js, there’s a number of ways to accomplish it, but you just have to make sure you are adding the mjs extension so metro knows to bundle them. You will also have to make sure to restart metro and clear the cache after making changes.

/* eslint-disable no-undef */
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = (async () => {
  const {
    resolver: { sourceExts },
  } = config;

  return {
    ...config,
    resolver: {
      ...config.resolver,
      sourceExts: [...sourceExts, 'mjs'],
    },
  };
})();

@hadiDanial .there’s no way to get it to work on web with metro, it’s kind of wasting time , but if you want to switch to webpack it works as answers above, but i didnt do that it’s not advisable to switch to webpack ,so either to use another 3d party library or to upgrade to expo 50 , the latter was my choice and expo 50 working fine with no issues right now , try to get it from npm website not from expo docs

On Tue, 6 Feb 2024, 12:37 am hadiDanial, @.***> wrote:

Is there a fix for this for React Native Web? It’s working for native, but it won’t compile for web, giving the error: "Web Bundling failed Unable to resolve “react-hook-form” from “path\to\file\SignInScreen.tsx” "

I can’t upgrade to Expo SDK 50 right now since it caused other issues in the project.

Were you able to fix this, @Hiba-Bazerbashi https://github.com/Hiba-Bazerbashi ?

— Reply to this email directly, view it on GitHub https://github.com/expo/expo/issues/23322#issuecomment-1928139664, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATXF3B6VFDXNFV4V2OJS4GLYSFGLHAVCNFSM6AAAAAA2AAJPU2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRYGEZTSNRWGQ . You are receiving this because you were mentioned.Message ID: @.***>

I have them working together fine on iOS & Android, but not on web.

I believe that this is the problem: https://github.com/expo/expo/commit/6a750d0620da88294f9f1c7bada2cb5b6d7df3ff#r121599931

Adding mjs and cjs to watcher.additionalExts seems to resolve the issue

I added the following line to my metro.config.ts to resolve this: config.resolver.sourceExts = [...config.resolver.sourceExts, "mjs", "cjs"]; The whole thing:

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

const config = getDefaultConfig(__dirname);

// Remove all console logs in production...
config.transformer.minifierConfig.compress.drop_console = true;
config.resolver.sourceExts = [...config.resolver.sourceExts, "mjs", "cjs"];
module.exports = config;

This got me past the react-hook-forms error, but now I’m getting a new error about GestureHandler and the Drawer. This is only happening on web. I’m not quite sure what’s going on tbh, possibly the above fix is not handling platform specific extensions? It’s hard to say what’s happening behind the scenes with all the transpiling and etc…

Web Bundling failed 1120ms
Unable to resolve "react-native-web/dist/exports/DrawerLayoutAndroid" from "node_modules/react-native-gesture-handler/lib/module/components/GestureComponents.web.js"

EDIT This seems to be a separate problem

Just the same issue

This is an unrelated issue, but all I had to do was npx expo install react-native-gesture-handler. @andreiascendia @nasir733

I added the following line to my metro.config.ts to resolve this: config.resolver.sourceExts = [...config.resolver.sourceExts, "mjs", "cjs"]; The whole thing:

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

const config = getDefaultConfig(__dirname);

// Remove all console logs in production...
config.transformer.minifierConfig.compress.drop_console = true;
config.resolver.sourceExts = [...config.resolver.sourceExts, "mjs", "cjs"];
module.exports = config;

This got me past the react-hook-forms error, but now I’m getting a new error about GestureHandler and the Drawer. This is only happening on web. I’m not quite sure what’s going on tbh, possibly the above fix is not handling platform specific extensions? It’s hard to say what’s happening behind the scenes with all the transpiling and etc…

Web Bundling failed 1120ms
Unable to resolve "react-native-web/dist/exports/DrawerLayoutAndroid" from "node_modules/react-native-gesture-handler/lib/module/components/GestureComponents.web.js"

EDIT This seems to be a separate problem

Just the same issue