Issues with redux-saga when using unstable_enablePackageExports

[svenlombaert]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

I enabled these three resolver options:

    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
    unstable_conditionNames: ['react-native', 'require', 'import'],

From then on, I'm getting "Cannot read property 'default' of undefined". (see screenshot)

I wonder if I'm using config options which conflict with each other? I had to enable above because I'm creating a package that uses the package exports property. This local package is symlinked to our main project in a monorepo structure.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

What is the expected behavior?

Before I enabled above options, everything was just resolving fine.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const defaultSourceExts =
  require('metro-config/src/defaults/defaults').sourceExts;

const exclusionList = require('metro-config/src/defaults/exclusionList');
const { getMetroTools } = require('react-native-monorepo-tools');

const monorepoMetroTools = getMetroTools();
/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const getSourceExts = () => {
  const exts = process.env.RN_SRC_EXT
    ? process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts)
    : defaultSourceExts;

  return exts;
};

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        inlineRequires: true,
      },
    }),
  },
  watchFolders: monorepoMetroTools.watchFolders,
  resolver: {
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
    unstable_conditionNames: ['react-native', 'require', 'import'],
    sourceExts: getSourceExts(),
    // Ensure we resolve nohoist libraries from this directory.
    blockList: exclusionList(monorepoMetroTools.blockList),
    extraNodeModules: {
      ...monorepoMetroTools.extraNodeModules,
      stream: require.resolve('readable-stream'),
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

yarn version: v1.22.19 node version: v18.18.0

react-native info output

System:
  OS: macOS 14.0
  CPU: (10) arm64 Apple M1 Pro
  Memory: 155.66 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 10.2.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2023.08.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.13.0
    path: /Users/xxx/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.11090377
  Xcode:
    version: 15.0/15A240d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/xxx/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

[mhuggins]

I'm running into a similar error with a third party useLatestCallback hook from within the use-latest-callback package. I'm enabled package exports in order to support the latest changes to the graphql-request package, and this error is a side effect that I have not been able to figure out.

module.exports = (() => {
  const config = getDefaultConfig();

  // ...snip...

  // support ESM package exports -- needed for latest graphql-request version
  config.resolver = {
    ...config.resolver,
    unstable_enablePackageExports: true,
    unstable_conditionNames: ['browser', 'require', 'import', 'react-native'], // 'browser' needed for axios, 'import' needed for graphql-request
    // sourceExts: [...config.resolver.sourceExts , 'cjs'],
  };
  // config.transformer = {
  //   ...config.transformer,
  //   getTransformOptions: async () => ({
  //     transform: {
  //       experimentalImportSupport: false,
  //       inlineRequires: false,
  //     },
  //   }),
  // };

  return config;
})();

[mhuggins]

@svenlombaert I just realized your original issue is 8 months old. Did you find a solution?

[rodrigolourenco]

Any workarounds @mhuggins or @svenlombaert?

[mhuggins]

@rodrigolourenco See my workaround here: https://github.com/jasonkuhrt/graffle/discussions/863#discussioncomment-10508143