React-native-web + react-native-reanimated, reanimated doesn't work on web

mobile React Native
1

Hi,

I’m working on an app that uses meteor, react-native and react-native-web. I need to use react-native-reanimated and I’m having trouble with making it work on web.

module-resolver config in .babelrc:

     [
        "module-resolver",
        {
           "root":[
              "./"
           ],
           "extensions":[".web.js", ".web.ts", ".web.tsx", ".js", ".jsx", ".ts", ".tsx"],
           "alias":{
              "react-native":"./node_modules/react-native-web",
              "@meteorrn/core":"meteor",
                         ...
              "react-native-gesture-handler":"./node_modules/react-native-gesture-handler/lib/module/index.js",
              "react-native-reanimated":"./node_modules/react-native-reanimated/lib/module/index.js"
           }
        }
     ],

and both plugins:

     "@babel/plugin-proposal-export-namespace-from",
     "react-native-reanimated/plugin"

are applied.

The problem is that anything that is exported from react-native-reanimated/lib/module/index.js ends up being undefined on the web side. I can patch index.js to export a simple function straight from there, but anything that involves path resolution fails. The definitions of these seemingly undefined functions are present in modules.js though. For instance, that’s how code for one of the reanimated hooks looks like:

'use strict';

!function (module1) {
  module1.export({
    useSharedValue: () => useSharedValue
  });
  let useEffect, useState;
  module1.link("react", {
    useEffect(v) {
      useEffect = v;
    },
    useState(v) {
      useState = v;
    }
  }, 0);
  let cancelAnimation;
  module1.link("../animation/index.js", {
    cancelAnimation(v) {
      cancelAnimation = v;
    }
  }, 1);
  let makeMutable;
  module1.link("../core.js", {
    makeMutable(v) {
      makeMutable = v;
    }
  }, 2);
  ___INIT_METEOR_FAST_REFRESH(module);
  var _s = $RefreshSig$();
  function useSharedValue(initialValue) {
    _s();
    var [mutable] = useState(() => makeMutable(initialValue));
    useEffect(() => {
      return () => {
        cancelAnimation(mutable);
      };
    }, [mutable]);
    return mutable;
  }
  _s(useSharedValue, "aby4xCEsIbinaTCXbSnmuNAze9M=");
}.call(this, module);

I suppose that perhaps something is failing silently during build (babel?), but I’m not getting any errors.

Does anyone have experience making a setup like mine run, or any suggestions on how to debug this further?