Unable to resolve module node:os

[ampopdev]

How frequently does the bug occur?

Always

Description

Build works, but when running app getting Unable to resolve module node:os. Tried changing the node version with nvm, but still no success. Issue start happening after upgrading to React Native version 0.74.1.

Stacktrace & log output

Error: Unable to resolve module node:os from */node_modules/realm/dist/platform/node/device-info.js: node:os could not be found within the project or in these directories:
  node_modules/realm/node_modules
  node_modules
  21 | };
  22 | Object.defineProperty(exports, "__esModule", { value: true });
> 23 | const node_os_1 = __importDefault(require("node:os"))

Can you reproduce the bug?

Always

Reproduction Steps

npx react-native@latest init MyApp
npm i realm @realm/react
npx react-native run-ios

Version

12.7.1

What services are you using?

Atlas Device Sync

Are you using encryption?

No

Platform OS and version(s)

12.8.0

Build environment

System:
OS: macOS 14.3.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.1.0 - /opt/homebrew/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v21.7.1/bin/yarn
npm: 10.7.0 - /opt/homebrew/bin/npm
Watchman: 2024.05.06.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.15.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.4, iOS 17.4, macOS 14.4, tvOS 17.4, visionOS 1.1, watchOS 10.4
IDEs:
Android Studio: 2023.2 AI-232.10227.8.2321.11479570
Xcode: 15.3/15E204a - /usr/bin/xcodebuild
npmPackages:
expo: ^51.0.0 => 51.0.2
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.74.1 => 0.74.1
Expo Workflow: bare

Cocoapods version

1.15.2

[sync-by-unito]

➤ PM Bot commented:

Jira ticket: RJS-2818

[kraenhansen]

It's very weird that Metro is picking up the Node entry-point. Can you share your Metro configuration?

[ampopdev]

@kraenhansen sending our metro.config.js:

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

[kraenhansen]

Thanks for sharing that - nothing stands out to me 🤔
The steps to reproduce seem to be missing an import from "realm". Are you able to reproduce this in isolation, outside of your current project?

[ampopdev]

So I solved the issue updating my metro.config.js as recommended in doc from react-native-svg-transformer:

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 => ext !== 'svg'),
    sourceExts: [...resolver.sourceExts, 'svg'],
  };

  return config;
})();