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

Expo Development Tools
1

I’ve set up a managed expo app as workspace in a monorepo. I did this because I want to share some react components I’ve created between my mobile and web apps.

The basic structure of my repo is:

    root/
        package.json (with nohoist: ["**/expoapp/**"])
        modules/
            ...shared modules, some simple JS, some react
        apps/
            web/  (cra-based web app)
            expoapp/
                package.json
                metro.config.js (addes watchFolders and extraNodeModules)
                App.js

I am able to import simple JS modules into my expoapp from the modules directory.

But when I try to import one of my react components, I get this error:

Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/jim/development/.../modules/loading-overlay/index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

The error message in the console points to the first line of my react component:

iOS Bundling failed 3378ms
Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/jim/development/.../modules/loading-overlay/index.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 React from 'react';
  2 |
  3 | const DumbModule = () => {
  4 |     return (

DumbModule is an intentionally simple react component:

import React from 'react';

const DumbModule = () => {
    return (
        <div>I am useless.</div>
    );
};

export default DumbModule;

I add it to App.js like so:

import DumbModule from '@mymodules/dumb-module';

The dependencies in my expoapp are:

  "dependencies": {
    "@babel/runtime": "^7.15.4",
    "@babel/core": "^7.15.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "expo": "~42.0.3",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "~0.13.12"
  },

If I disable the import into App.js, expo runs fine. If I enable it, I get the above message pointing at the first line of my component.

I’ve been through every suggestion I can find, including reinstalling babel, changing versions, and using expo-yarn-workspaces. No luck.

Any ideas?

% expo diagnostics

  Expo CLI 4.11.0 environment info:
    System:
      OS: macOS 11.5.2
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
      Yarn: 1.22.11 - ~/.nvm/versions/node/v14.16.1/bin/yarn
      npm: 7.24.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
    IDEs:
      Xcode: 13.0/13A233 - /usr/bin/xcodebuild
    npmGlobalPackages:
      expo-cli: 4.11.0
    Expo Workflow: managed
2

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.