Expo SDK 49 web (with metro) not working with react-hook-form #23322

fuelkoy · 2023-07-06T07:25:21Z

Minimal reproducible example

Had before. I seemly deleted it after some point

Summary

Template project from "https://docs.expo.dev/routing/installation/" and upgrading app according to "https://blog.expo.dev/expo-sdk-49-c6d398cdf740".

npm run web > blank page with following error in terminal:

Unable to resolve "react-hook-form" from "app\(tabs)\index.tsx",

and in chrome console:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Refused to execute script from 'http://localhost:8081/index.ts.bundle?platform=web&dev=true&hot=false&lazy=true' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

Environment

expo-env-info 1.0.5 environment info:
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Local\pnpm\yarn.CMD
npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
expo: ^49.0.0 => 49.0.0
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.72.1 => 0.72.1
react-native-web: ~0.19.6 => 0.19.6
Expo Workflow: managed

The text was updated successfully, but these errors were encountered:

Briseus · 2023-07-06T08:02:50Z

just hit the same issue while upgrading from 48 to 49

lenmazzone · 2023-07-06T14:33:07Z

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;

fuelkoy · 2023-07-06T17:51:29Z

@lenmazzone works perfectly!
Thank you for sharing. I don't know how Expo team should take account of this, but at least now they have the knowledge of the problem (and react-hook-form could be pretty well used package) and also the solution

Related to #23180 (as including mjs (and cjs?) as default metro config should resolve the issue)

robertherber · 2023-07-13T09:59:49Z

Related issue for urql: urql-graphql/urql#3313

The same metro.config.js trick fixed this for urql 👍 I guess it would make sense to make this part of the default metro.config.js?

gorbypark · 2023-07-14T06:24:45Z

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

andreiascendia · 2023-07-14T09:07:24Z

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

Any success with he hook problem?

nasir733 · 2023-07-16T04:21:06Z

just ran into the same issue

ysheep-js · 2023-07-17T09:34:41Z

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

gorbypark · 2023-07-17T10:06:16Z

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

dben89x · 2023-07-30T12:28:21Z

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

@gorbypark any success with the DrawerLayoutAndroid issue? I'm getting almost an identical error:

Unable to resolve "react-native-web/dist/exports/DrawerLayoutAndroid" from "node_modules/react-native-gesture-handler/src/components/GestureComponents.tsx"

Only difference is GestureComponents.tsx vs GestureComponents.web.js.

balgamat · 2023-08-22T20:06:04Z

I had "mjs" and "cjs" extensions in metro config already so I haven't noticed any problems... that is until I tried to bundle for the web:

I simply cannot get hook form going for the web...

LinusU · 2023-08-26T17:19:16Z

I believe that this is the problem: 6a750d0#r121599931

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

noledev · 2023-08-27T19:33:05Z

Thanks! Adding the extensions worked for me as well.

For those experiencing the DrawerLayoutAndroid issue, I also got this when updating to Expo 49. react-native-web@0.19.0 removed this component, but my version of react-native-gesture-handler was still referencing it. Updating to the latest (v2.12.1) resolved that error for me.

Ernest2026 · 2023-10-08T00:06:52Z

balgamat

Hi balgamat, have you found a solution for this yet, I'm having similar issue, and I'll need to access the web to write test. Let me know if you have a workaround or you've found the solution, thanks in advance...

simoazzo · 2023-12-14T09:54:29Z

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 fixes the issue. Thank you @lenmazzone

OneHatRepo · 2023-12-22T20:03:38Z

I've got the same issue as @balgamat, and it's preventing me from using React Hook Form and Metro together on the web. This consequently prevents me from using Expo Router, which depends upon Metro!

package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "web": "npx expo start --clear --web -p 8083",
    "build": "npx expo export -p web",
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios"
  },
  "dependencies": {
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.49.2",
    "react-native": "0.72.6",
    "react-native-safe-area-context": "4.6.3",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname, {
	// Enable CSS support.
	isCSSEnabled: true,
});

config.resolver.sourceExts.push('mjs', 'cjs');
config.resolver.assetExts.push('mjs', 'cjs');
config.watcher.additionalExts.push('mjs', 'cjs');

module.exports = config;

Error:

Uncaught TypeError: (0 , _reactHookForm.useForm) is not a function

Ernest2026 · 2023-12-23T06:24:43Z

I've got the same issue as @balgamat, and it's preventing me from using React Hook Form and Metro together on the web. This consequently prevents me from using Expo Router, which depends upon Metro!

package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "web": "npx expo start --clear --web -p 8083",
    "build": "npx expo export -p web",
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios"
  },
  "dependencies": {
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.49.2",
    "react-native": "0.72.6",
    "react-native-safe-area-context": "4.6.3",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname, {
	// Enable CSS support.
	isCSSEnabled: true,
});

config.resolver.sourceExts.push('mjs', 'cjs');
config.resolver.assetExts.push('mjs', 'cjs');
config.watcher.additionalExts.push('mjs', 'cjs');

module.exports = config;

Error:

Uncaught TypeError: (0 , _reactHookForm.useForm) is not a function

I had similar issues, I was able to fix it by just adding webpack bundler, I think expo 49 is not really compatible with react-hook-form most especially on the web

OneHatRepo · 2023-12-23T14:32:11Z

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

Hiba-Bazerbashi · 2024-01-01T07:07:41Z

I have same issue with expo 49 managed
"expo": ^49.0.21,
"react-hook-form": ^7.49.2,
"@hookform/error-message": ^2.0.1,
"@hookform/resolvers": ^3.3.3,

metro.config.ts

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname );
  const { transformer, resolver } = config;
  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext:any) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };
  config.resolver.sourceExts.push('cjs');
  config.resolver.sourceExts.push('mjs');
  return config;
})();

on web I got this error

Unable to resolve "react-hook-form" from "src\screens\authScreens\signUpScreen\SignUpScreen.tsx"
and
import { ErrorMessage } from "@hookform/error-message"; give that error :
Unable to resolve "react-hook-form" from "node_modules@hookform\error-message\dist\index.esm.js"
also
import { yupResolver } from '@hookform/resolvers/yup'; give :
Unable to resolve "react-hook-form" from "node_modules@hookform\resolvers\yup\dist\yup.module.js"

on browser
Refused to execute script from 'http://localhost:8081/index.ts.bundle?platform=web&dev=true&hot=false&lazy=true' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
on android just stuck in splash screen

any solution suggested ??

OneHatRepo · 2024-01-01T14:50:02Z

I was able to get them working together on web by switching to webpack bundler instead of metro. There seems to be a fundamental incompatibility between metro for web and react-hook-form.

EvanBacon · 2024-01-15T22:33:02Z

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

hadiDanial · 2024-02-05T21:37:41Z

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 · 2024-02-06T01:00:00Z

@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 <#23322 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATXF3B6VFDXNFV4V2OJS4GLYSFGLHAVCNFSM6AAAAAA2AAJPU2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRYGEZTSNRWGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

gorbypark · 2024-02-06T09:52:18Z

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 · 2024-02-06T10:09:53Z

@gorbypark That worked!
I'm not familiar with Metro, and I had the config in a .ts file, and you said .js, so I just checked and according to metrobundler.dev:

A Metro config can be created in these three ways (ordered by priority):

metro.config.js
metro.config.json
The metro field in package.json

Chuck it up to a beginner mistake. Your config works perfectly, thanks mate ^^

fuelkoy added the needs validation Issue needs to be validated label Jul 6, 2023

expo-bot added needs review Issue is ready to be reviewed by a maintainer and removed needs validation Issue needs to be validated labels Jul 6, 2023

robertherber mentioned this issue Jul 13, 2023

Unable to resolve "@urql/core" from "node_modules/urql/dist/urql.es.js" urql-graphql/urql#3313

Closed

3 tasks

byoungdale mentioned this issue Aug 28, 2023

Start web not working justlaunch-app/expo-router-starter-kit#19

Closed

LinusU mentioned this issue Oct 10, 2023

Keep upstream additionalExts when adding env files #24809

Closed

1 task

fuelkoy mentioned this issue Jan 16, 2024

[SDK 49] default metro config needs to include "mjs" #23180

Open

fuelkoy closed this as completed Jan 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expo SDK 49 web (with metro) not working with react-hook-form #23322

Expo SDK 49 web (with metro) not working with react-hook-form #23322

fuelkoy commented Jul 6, 2023 •

edited

Briseus commented Jul 6, 2023

lenmazzone commented Jul 6, 2023 •

edited

fuelkoy commented Jul 6, 2023 •

edited

robertherber commented Jul 13, 2023 •

edited

gorbypark commented Jul 14, 2023 •

edited

andreiascendia commented Jul 14, 2023

nasir733 commented Jul 16, 2023

ysheep-js commented Jul 17, 2023

gorbypark commented Jul 17, 2023 •

edited

dben89x commented Jul 30, 2023

balgamat commented Aug 22, 2023

LinusU commented Aug 26, 2023

noledev commented Aug 27, 2023

Ernest2026 commented Oct 8, 2023

simoazzo commented Dec 14, 2023

OneHatRepo commented Dec 22, 2023

Ernest2026 commented Dec 23, 2023

OneHatRepo commented Dec 23, 2023

Hiba-Bazerbashi commented Jan 1, 2024 •

edited

OneHatRepo commented Jan 1, 2024

EvanBacon commented Jan 15, 2024

hadiDanial commented Feb 5, 2024

Hiba-Bazerbashi commented Feb 6, 2024 via email •

edited

gorbypark commented Feb 6, 2024

hadiDanial commented Feb 6, 2024

Expo SDK 49 web (with metro) not working with react-hook-form #23322

Expo SDK 49 web (with metro) not working with react-hook-form #23322

Comments

fuelkoy commented Jul 6, 2023 • edited

Minimal reproducible example

Summary

Environment

Briseus commented Jul 6, 2023

lenmazzone commented Jul 6, 2023 • edited

fuelkoy commented Jul 6, 2023 • edited

robertherber commented Jul 13, 2023 • edited

gorbypark commented Jul 14, 2023 • edited

andreiascendia commented Jul 14, 2023

nasir733 commented Jul 16, 2023

ysheep-js commented Jul 17, 2023

gorbypark commented Jul 17, 2023 • edited

dben89x commented Jul 30, 2023

balgamat commented Aug 22, 2023

LinusU commented Aug 26, 2023

noledev commented Aug 27, 2023

Ernest2026 commented Oct 8, 2023

simoazzo commented Dec 14, 2023

OneHatRepo commented Dec 22, 2023

Ernest2026 commented Dec 23, 2023

OneHatRepo commented Dec 23, 2023

Hiba-Bazerbashi commented Jan 1, 2024 • edited

OneHatRepo commented Jan 1, 2024

EvanBacon commented Jan 15, 2024

hadiDanial commented Feb 5, 2024

Hiba-Bazerbashi commented Feb 6, 2024 via email • edited

gorbypark commented Feb 6, 2024

hadiDanial commented Feb 6, 2024

fuelkoy commented Jul 6, 2023 •

edited

lenmazzone commented Jul 6, 2023 •

edited

fuelkoy commented Jul 6, 2023 •

edited

robertherber commented Jul 13, 2023 •

edited

gorbypark commented Jul 14, 2023 •

edited

gorbypark commented Jul 17, 2023 •

edited

Hiba-Bazerbashi commented Jan 1, 2024 •

edited

Hiba-Bazerbashi commented Feb 6, 2024 via email •

edited