Using metro for bundler prevents web from loading packages

[sandmule]

Which package manager are you using? (Yarn is recommended)

yarn

Summary

I'm using the metro bundler for web, as recommended. I'm trying to use gluestack-style which has a dependency of @legendapp/motion. It all works fine on iOS/android but it fails to resolve on web Unable to resolve "@legendapp/motion" from . I believe this is because the package hasn't been transpiled.

I've found how you can achieve this for webpack, but haven't found any documentation on how to achieve this, while using Metro for web.

Minimal reproducible example

//app.json
"web": {
"bundler": "metro",
}

// app.tsx
import { AnimatePresence } from '@legendapp/motion';

[brianjuhl]

Running into the same issue with this package. Just migrated from Webpack.

[marklawlor]

This appears to be a problem with@legendapp/motion package.json file

{
    "name": "@legendapp/motion",
    "version": "2.2.0",
    "description": "legend-motion",
    "sideEffects": false,
    "main": "dist/commonjs/",          
    "module": "dist/module/",  // Metro Web will use the `module` resolution - THIS PATH DOES NOT EXIST
    "types": "index.d.ts",
    "react-native": "src/",
    "source": "src/",
    "exports": {               // Webpack supports exports, so it will use these paths
        ".": "./index.js",
        "./svg": "./svg.js",
        "./linear-gradient": "./linear-gradient.js",
        "./linear-gradient-expo": "./linear-gradient-expo.js",
        "./styled": "./styled.js",
        "./package.json": "./package.json"
    },

Correcting the module to lib/module reveals a new error message

Unable to resolve "@legendapp/tools" from "node_modules/@legendapp/motion/lib/module/AnimatePresence.js"

So now it is correctly loading the package but the package.json issues continue. @legendapp/tools also has an incorrect package.json

    "module": "dist/legend-tools.esm.js",

This file does not exist. Changing it to dist/tools.esm.js will cause it to work correctly.

@jmeistrich Tagging you as this appears to be across multiple legendapp packages

[jmeistrich]

Thanks @marklawlor! I will fix those packages.

[jmeistrich]

I think this should be fixed in @legendapp/motion version 2.2.1. If not, please update in the legend-motion issue: LegendApp/legend-motion#12

[eightyfive]

I am not able to load hls.js either. I checked their package.json and it seems fine to me, all paths exist:

{
  "main": "./dist/hls.js",
  "module": "./dist/hls.mjs",
  "types": "./dist/hls.js.d.ts",
}

Especially "module": "./dist/hls.mjs", does exist.

Can we re-open the issue @marklawlor ?

UPDATE

Same for swiper. It seems that web-specific packages are not supported?

[jmeistrich]

@eightyfive What package is having an issue with hls.js? I don't think that's legend-motion?

[eightyfive]

No legend-motion involved indeed. I am just importing hls.js & swiper in my expo-router project.

Works with SDK 48 (webpack), fails with SDK 49 (metro).

I'm not too fluent about metro for web bundling. Someone mentioned above it is using the module package.json entry? Is that correct?

[keithpickering]

Experiencing this issue with msw/browser