TypeError: tslib.default is undefined

[rabbldating]

Describe the bug

Blank Expo 57 project with react-native-echarts fails rendering the chart on RN web with TypeError: tslib.default is undefined with the example from the README. Full reproduction: https://github.com/rabbldating/testrnecharts

To Reproduce

npx create-expo-app@latest --template blank-typescript
cd project
npx expo install @wuba/react-native-echarts echarts react-native-svg
npx expo install react-dom react-native-web

Then add example chart from https://github.com/wuba/react-native-echarts#example

Then:

npx expo start --web

The following error shows up and the chart does not render:

$ npx expo start --web
[...]
Web  ERROR  [TypeError: tslib.default is undefined] @http://localhost:8081/index.ts.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:30890:7

Full example: https://github.com/rabbldating/testrnecharts

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox
• Version: 151

[zhiqingchen]

这是 tslib 版本兼容问题。

如果使用 npm，请在 package.json 中添加：

"overrides": {
  "tslib": "2.8.1"
}

如果使用 Yarn，则添加：

"resolutions": {
  "tslib": "2.8.1"
}

然后删除 node_modules 和锁文件并重新安装依赖：

rm -rf node_modules package-lock.json
npm install

最后执行以下命令确认 tslib 已升级：

npm ls tslib

注意：npm 不支持 resolutions，必须使用 overrides。

[rabbldating]

Interesting, so in the simple test project, adding the tslib overrides, removing node_modules package-lock.json, running npm install and running npx expo start --web --clear works, but then when I try to do the same in my main project (very large project), I get a new error:

Metro error: Cannot destructure property '__extends' of 'tslib.default' as it is undefined.

$ npm ls tslib
realproject@1.0.0 /work/realproject/src/realproject
├─┬ @wuba/react-native-echarts@3.1.1
│ └─┬ zrender@6.1.0
│   └── tslib@2.8.1 deduped
├─┬ echarts@6.1.0
│ └── tslib@2.8.1 overridden
├─┬ expo-router@57.0.9
│ └─┬ vaul@1.1.2
│   └─┬ @radix-ui/react-dialog@1.1.23
│     └─┬ react-remove-scroll@2.7.2
│       ├─┬ react-remove-scroll-bar@2.3.8
│       │ └── tslib@2.8.1 deduped
│       ├─┬ react-style-singleton@2.2.3
│       │ └── tslib@2.8.1 deduped
│       ├── tslib@2.8.1 deduped
│       ├─┬ use-callback-ref@1.3.3
│       │ └── tslib@2.8.1 deduped
│       └─┬ use-sidecar@1.1.3
│         └── tslib@2.8.1 deduped
└─┬ react-aria@3.50.0
  ├─┬ @swc/helpers@0.5.23
  │ └── tslib@2.8.1 deduped
  └─┬ aria-hidden@1.2.6
    └── tslib@2.8.1 deduped

[rabbldating]

If it helps, here's the full stack:

  TypeError: Cannot destructure property '__extends' of 'tslib.default' as it is undefined.
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:315716:5
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:166:14)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:315115:16
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:166:14)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:313099:24
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:166:14)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:312821:20
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:166:14)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:312798:31
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:166:14)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:312763:23
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:166:14)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:312722:24
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:166:14)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:312475:33
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:166:14)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at /work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:311997:31
    at loadModuleImplementation (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:254:34)
    at guardedLoadModule (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:159:23)
    at metroRequire (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:79:75)
    at Object.get [as ./(maindomain-loggedin-stack)/manage/[manage_community_id]/index.tsx] (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:76127:16)
    at metroContext (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:76450:15)
    at Object.loadRoute (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69477:27)
    at runtimeValidateRouteNode (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69732:30)
    at validateRouteTreeExports (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69743:5)
    at validateRouteTreeExports (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69745:7)
    at validateRouteTreeExports (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69745:7)
    at validateRouteTreeExports (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69745:7)
    at validateRouteTreeExports (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69745:7)
    at getRoutes (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69284:7)
    at getRoutes (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:69145:42)
    at useStore (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:55789:49)
    at ContextNavigator (/work/realproject/src/realproject/node_modules/@expo/router-server/node/render.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable:73834:47)
    at Object.react_stack_bottom_frame (/work/realproject/src/realproject/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:9808:18)

---

metro.config.js:

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

const config = getDefaultConfig(__dirname);

module.exports = config;

[rabbldating]

Fixed with an update in metro.config.js based on an internet post:

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

const config = getDefaultConfig(__dirname);

// Define an alias to resolve tslib to its ES6 module file
const ALIASES = {
  tslib: "tslib/tslib.es6.js", 
};

// Intercept module resolution and apply the tslib alias
config.resolver.resolveRequest = (context, moduleName, platform) => {
  return context.resolveRequest(
    context,
    ALIASES[moduleName] ?? moduleName,
    platform
  );
};

module.exports = config;