Tslib issue after upgrading react-native

[mbrimmer83]

Current behavior

Bundle error: cannot read property '__extends' of undefined Error doesn't make sense to me, I wouldn't think this tslib version would cause this error. I can remove FlashList and replace it with Flatlist and the error goes away. I can also fix the error by using yarn resolutions "@shopify/flash-list/tslib": "2.6.1"

Expected behavior

FlashList loads without resolutions

To Reproduce

Upgrade React Native to 72.3.2

Platform:

• [x] iOS -
• [ ] Android

Environment

"@shopify/flash-list": "~1.5.0",

[thenglong]

Also face the same issue.

[israromar]

facing the same issue and it's pointing to the usage of FlashList

[nvsd]

I'm also getting this error.

[rohanddave]

Facing the same problem

[mbrimmer83]

@thenglong @nvsd @rohanddave @israromar Currently I'm still using resolutions to resolve this. I haven't looked at any of the new releases, but I'm assuming the issue hasn't been resolved.

"resolutions": {
    "@shopify/flash-list/tslib": "2.6.1"
  }

[ludwig-pro]

So do I ... weird error

[MattiaDellOca]

I was facing an error very similar to yours: TypeError: Cannot read property '__extends' of undefined, js engine: hermes. Note that I'm not using @shopify/flash-list, but I think that the root problem is common here.

I managed to solve the issue thanks to this well-written article.

As suggested in the article, what fixed the error for me was modifying my Webpack config when resolving tslib:

alias: {
    "tslib": "./node_modules/tslib/tslib.es6.js",
},

[ArvidAnderson]

I have the same issue.

[bertoabist]

Resolve the issue in you metro config resolve request. For example like this (expo): Full docs

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

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

const ALIASES = {
  tslib: path.resolve(__dirname, "node_modules/tslib/tslib.es6.js"),
};

config.resolver.resolveRequest = (context, moduleName, platform) => {
  // Ensure you call the default resolver.
  return context.resolveRequest(
    context,
    // Use an alias if one exists.
    ALIASES[moduleName] ?? moduleName,
    platform
  );
};

module.exports = config;