expo@42 support #3731

vjpr · 2021-08-31T18:24:56Z

Just an issue to track expo + pnpm support.

Working example

https://github.com/vjpr/pnpm-react-native-expo-example

Tested on 2021/09/01.

Versions

See here for Expo versioning guide: http://docs.expo.io/versions/latest/sdk/index.html#sdk-version

Expo SDK = 42.0.0
React Native = 0.63.3

Installed versions

$ pnpm why metro

@react-native-community/cli 4.14.0
metro 0.59.0

$ pnpm why jest-haste-map

jest-haste-map 24.9.0

Github Issues

Good places to search for previously solved issues.

Reference

https://blog.expo.dev/expo-sdk-42-579aee2348b6

Summary

See: https://github.com/vjpr/pnpm-react-native-expo-example

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

vjpr · 2021-08-31T22:02:52Z

npx expo init expo-blank --name=expo-blank --template=expo-template-blank-typescript
cd expo-blank
npm run ios

`Cannot find module 'connect'`

Cannot find module 'connect'
Require stack:
- /Users/Vaughan/nvm/versions/node/v16.7.0/pnpm-global/5/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/build/metro/createDevServerAsync.js
- /Users/Vaughan/nvm/versions/node/v16.7.0/pnpm-global/5/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/build/MetroDevServer.js
- /Users/Vaughan/nvm/versions/node/v16.7.0/pnpm-global/5/node_modules/.pnpm/xdl@59.1.0/node_modules/xdl/build/start/startDevServerAsync.js
- /Users/Vaughan/nvm/versions/node/v16.7.0/pnpm-global/5/node_modules/.pnpm/xdl@59.1.0/node_modules/xdl/build/internal.js
- /Users/Vaughan/nvm/versions/node/v16.7.0/pnpm-global/5/node_modules/.pnpm/xdl@59.1.0/node_modules/xdl/build/index.js
- /Users/Vaughan/nvm/versions/node/v16.7.0/pnpm-global/5/node_modules/.pnpm/expo-cli@4.11.0/node_modules/expo-cli/build/exp.js
- /Users/Vaughan/nvm/versions/node/v16.7.0/pnpm-global/5/node_modules/.pnpm/expo-cli@4.11.0/node_modules/expo-cli/bin/expo.js

Use a local expo-cli

pnpm add -d expo-cli

Fix missing deps in pnpmfile

addDepToMany(pkg, [['@expo/dev-server']], [['connect']])

$ pnpm update --filter .

`require() of ES Module ... not supported`

require() of ES Module /xxx/node_modules/.pnpm/node-fetch@3.0.0/node_modules/node-fetch/src/index.js from /xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/build/middleware/createJsInspectorMiddleware.js not supported.
Instead change the require of index.js in /xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/build/middleware/createJsInspectorMiddleware.js to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module /xxx/node_modules/.pnpm/node-fetch@3.0.0/node_modules/node-fetch/src/index.js from /xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/build/middleware/createJsInspectorMiddleware.js not supported.
Instead change the require of index.js in /xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/build/middleware/createJsInspectorMiddleware.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/build/middleware/createJsInspectorMiddleware.js:8:38)
    at Object.<anonymous> (/xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/build/MetroDevServer.js:37:55)
    at _devServer (/xxx/node_modules/.pnpm/xdl@59.1.0_typescript@4.0.8/node_modules/xdl/build/start/startDevServerAsync.js:9:16)
    at startDevServerAsync (/xxx/node_modules/.pnpm/xdl@59.1.0_typescript@4.0.8/node_modules/xdl/build/start/startDevServerAsync.js:62:17)
    at async startAsync (/xxx/node_modules/.pnpm/xdl@59.1.0_typescript@4.0.8/node_modules/xdl/build/start/startAsync.js:83:40)

node-fetch@3 uses {type: 'module'} and cannot be imported by require. Everyone moved to ES modules too soon and broke everything.

If we look in @expo/dev-server/package.json we find that node-fetch@2 is a dev dep that should be a prod dep. Interested to know how expo will work around this dep having gone full ES module. Discussion: node-fetch/node-fetch#1227 (comment).

addDepToMany(pkg, [['@expo/dev-server']], [['connect'], ['node-fetch', '^2.6.0']])

$ pnpm update --filter .

Missing packages

expo/expo-cli#3813

`Missing package "metro-config" in the project`

Missing package "metro-config" in the project. This usually means `react-native` is not installed. Please verify that dependencies in package.json include "react-native" and run `yarn` or `npm install`.
Error: Missing package "metro-config" in the project. This usually means `react-native` is not installed. Please verify that dependencies in package.json include "react-native" and run `yarn` or `npm install`.
    at importMetroConfigFromProject (/xxx/.pnpm/@expo+metro-config@0.1.84/node_modules/@expo/metro-config/src/ExpoMetroConfig.ts:244:11)
    at getDefaultConfig (/xxx/.pnpm/@expo+metro-config@0.1.84/node_modules/@expo/metro-config/src/ExpoMetroConfig.ts:70:23)
    at Object.loadAsync (/xxx/.pnpm/@expo+metro-config@0.1.84/node_modules/@expo/metro-config/src/ExpoMetroConfig.ts:230:23)
    at runMetroDevServerAsync (/xxx/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/src/MetroDevServer.ts:67:45)
    at startDevServerAsync (/xxx/.pnpm/xdl@59.1.0_typescript@4.0.8/node_modules/xdl/src/start/startDevServerAsync.ts:62:55)
    at startAsync (/xxx/.pnpm/xdl@59.1.0_typescript@4.0.8/node_modules/xdl/src/start/startAsync.ts:74:41)

metro-config is imported manually from the project root.

/xxx/.pnpm/@expo+metro-config@0.1.84/node_modules/@expo/metro-config/build/ExpoMetroConfig.js

function importMetroConfigFromProject(projectRoot) {
    const resolvedPath = resolve_from_1.default.silent(projectRoot, 'metro-config');
    if (!resolvedPath) {
        throw new Error('Missing package "metro-config" in the project. ' +
            'This usually means `react-native` is not installed. ' +
            'Please verify that dependencies in package.json include "react-native" ' +
            'and run `yarn` or `npm install`.');
    }
    return require(resolvedPath);
}

pnpm add metro-config@^0.59

`Missing package "metro/src/Server"`

Missing package "metro/src/Server" in the project at: /xxx/repos/live/packages/app-templates/expo-v42
This usually means `react-native` is not installed. Please verify that dependencies in package.json include "react-native" and run `yarn` or `npm install`.
Error: Missing package "metro/src/Server" in the project at: /xxx/repos/live/packages/app-templates/expo-v42
This usually means `react-native` is not installed. Please verify that dependencies in package.json include "react-native" and run `yarn` or `npm install`.
    at resolveFromProject (/xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/src/metro/importMetroFromProject.ts:21:11)
    at importFromProject (/xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/src/metro/importMetroFromProject.ts:27:18)
    at Object.importMetroServerFromProject (/xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/src/metro/importMetroFromProject.ts:53:10)
    at runMetro (/xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/src/metro/createDevServerAsync.ts:36:23)
    at Object.createDevServerAsync (/xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/src/metro/createDevServerAsync.ts:59:29)
    at runMetroDevServerAsync (/xxx/node_modules/.pnpm/@expo+dev-server@0.1.84/node_modules/@expo/dev-server/src/MetroDevServer.ts:96:28)
    at startDevServerAsync (/xxx/node_modules/.pnpm/xdl@59.1.0_typescript@4.0.8/node_modules/xdl/src/start/startDevServerAsync.ts:62:49)
    at startAsync (/xxx/node_modules/.pnpm/xdl@59.1.0_typescript@4.0.8/node_modules/xdl/src/start/startAsync.ts:74:41)

pnpm add metro@^0.59

`Missing package "metro-inspector-proxy"`

pnpm add metro-inspector-proxy@^0.59

`Error: EISDIR: illegal operation on a directory, read`

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (node:fs:723:3)
    at tryReadSync (node:fs:433:20)
    at Object.readFileSync (node:fs:479:19)
    at UnableToResolveError.buildCodeFrameMessage (/Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.59.0/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:304:17)
    at new UnableToResolveError (/Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.59.0/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:290:35)
    at ModuleResolver.resolveDependency (/Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.59.0/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:168:15)
    at DependencyGraph.resolveDependency (/Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.59.0/node_modules/metro/src/node-haste/DependencyGraph.js:353:43)
    at /Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.59.0/node_modules/metro/src/lib/transformHelpers.js:271:42
    at Server.<anonymous> (/Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.59.0/node_modules/metro/src/Server.js:842:41)
    at Generator.next (<anonymous>)

It's trying to read this path with fs.readFileSync: /xxx/repos/live/packages/app-templates/expo-v42/..

This is caused by a bad entry point. Pnpm folder structure is different.

"main": "node_modules/expo/AppEntry.js",

node_modules/expo/AppEntry.js

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

We just move this into our src dir instead.

`Unable to resolve module @babel/runtime/helpers/interopRequireDefault`

iOS Bundling failed 995ms
Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/Vaughan/dev-mono/thirtyfive/repos/live/packages/app-templates/expo-v42/AppEntry.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import registerRootComponent from 'expo/build/launch/registerRootComponent'
  2 |
  3 | import App from './App'
  4 |

See #2622 (comment) for the most detailed debug journey.

`Unable to find module DevMenu` on-screen only

This resolves itself.

vjpr · 2021-09-01T02:08:36Z

App crashes on Android - `Networking.sendRequest got 2 arguments, expected 9`

$ adb logcat

09-01 04:01:37.593  6879  7023 W ReactNativeJS: Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.
09-01 04:01:37.610  6879  7024 F libc    : /usr/local/google/buildbot/src/android/ndk-release-r20/external/libcxx/../../external/libcxxabi/src/abort_message.cpp:73: abort_message: assertion "terminating with uncaught exception of type facebook::jni::JniException: abi42_0_0.com.facebook.react.bridge.NativeArgumentsParseException: Networking.sendRequest got 2 arguments, expected 9" failed
09-01 04:01:37.610  6879  7024 F libc    : Fatal signal 6 (SIGABRT), code -1 (SI_QUEUE) in tid 7024 (mqt_native_modu), pid 6879 (st.exp.exponent)

Had to clear node_modules/.cache.

Also check all dependencies are aligned across all packages and helper dependencies.

vjpr · 2021-09-01T02:26:01Z

So I have it working now on iOS and Android.

Tomorrow I will push a test repo. There is also a package called @live/pnpm-react-native-helper-expo that I need to publish which makes everything work.

vjpr · 2021-09-01T13:31:57Z

Here it is: https://github.com/vjpr/pnpm-react-native-expo-example

valtyr · 2021-12-15T14:38:50Z

Hey @vjpr. Sorry to resurrect this old issue. Have there been any updates on this? I can't seem to find the package you're referencing anywhere. Is it the one in the react-native-expo-example repo?

vjpr · 2021-12-15T21:18:21Z

Which package?

fschoenfeldt · 2021-12-15T21:33:58Z

Which package?

I think he's referring to @live/pnpm-react-native-helper-expo (you comment #3731 (comment))

vjpr · 2021-12-15T21:39:07Z

This is a "workspace dep" in packages/pnpm-react-native-helper.

Make sure you have a pnpm-workspace.yaml which includes the packages dir.

zkochan · 2021-12-16T13:56:02Z

@vjpr it might be better to document this on our website instead of creating these issues all the time.

vjpr added the type: feature label Aug 31, 2021

This was referenced Aug 31, 2021

expo@39 support #3010

Closed

expo@40 support #3321

Closed

vjpr mentioned this issue Sep 1, 2021

Missing deps in package.json expo/expo-cli#3813

Closed

vjpr closed this as completed Sep 1, 2021

vjpr mentioned this issue Sep 1, 2021

SHA-1 for file ... is not computed when using resolver.resolveRequest facebook/metro#330

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

expo@42 support #3731

expo@42 support #3731

vjpr commented Aug 31, 2021 •

edited

vjpr commented Aug 31, 2021 •

edited

vjpr commented Sep 1, 2021 •

edited

vjpr commented Sep 1, 2021 •

edited

vjpr commented Sep 1, 2021

valtyr commented Dec 15, 2021 •

edited

vjpr commented Dec 15, 2021

fschoenfeldt commented Dec 15, 2021

vjpr commented Dec 15, 2021

zkochan commented Dec 16, 2021

expo@42 support #3731

expo@42 support #3731

Comments

vjpr commented Aug 31, 2021 • edited

Working example

Versions

Installed versions

Github Issues

Reference

Summary

vjpr commented Aug 31, 2021 • edited

Cannot find module 'connect'

require() of ES Module ... not supported

Missing packages

Missing package "metro-config" in the project

/xxx/.pnpm/@expo+metro-config@0.1.84/node_modules/@expo/metro-config/build/ExpoMetroConfig.js

Missing package "metro/src/Server"

Missing package "metro-inspector-proxy"

Error: EISDIR: illegal operation on a directory, read

Unable to resolve module @babel/runtime/helpers/interopRequireDefault

Unable to find module DevMenu on-screen only

vjpr commented Sep 1, 2021 • edited

App crashes on Android - Networking.sendRequest got 2 arguments, expected 9

vjpr commented Sep 1, 2021 • edited

vjpr commented Sep 1, 2021

valtyr commented Dec 15, 2021 • edited

vjpr commented Dec 15, 2021

fschoenfeldt commented Dec 15, 2021

vjpr commented Dec 15, 2021

zkochan commented Dec 16, 2021

vjpr commented Aug 31, 2021 •

edited

vjpr commented Aug 31, 2021 •

edited

`Cannot find module 'connect'`

`require() of ES Module ... not supported`

`Missing package "metro-config" in the project`

`Missing package "metro/src/Server"`

`Missing package "metro-inspector-proxy"`

`Error: EISDIR: illegal operation on a directory, read`

`Unable to resolve module @babel/runtime/helpers/interopRequireDefault`

`Unable to find module DevMenu` on-screen only

vjpr commented Sep 1, 2021 •

edited

App crashes on Android - `Networking.sendRequest got 2 arguments, expected 9`

vjpr commented Sep 1, 2021 •

edited

valtyr commented Dec 15, 2021 •

edited