Using metro for bundler prevents web from loading packages

sandmule commented 1 year ago

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 commented 1 year ago

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

marklawlor commented 1 year ago

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 commented 1 year ago

Thanks @marklawlor! I will fix those packages.

jmeistrich commented 1 year ago

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

eightyfive commented 1 year ago

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 commented 1 year ago

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

eightyfive commented 1 year ago

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 commented 10 months ago

Experiencing this issue with msw/browser

expo / router