Issues after upgrading to 0.12 - broken on web

[hirbod]

Hi @nandorojo ,

thanks for your AMAZING library. You've built something amazing here for the community.

I just upgraded to 0.12 and everything I've build which was working fine, is broken right now. I am a bit stuck to understand what happened.

I have a dead simple fadeIn animation (a MotiView with a bunch of unanimated childrens)

index.js:1 The above error occurred in the <ForwardRef(Moti)> component:

Mapper.js:33 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at extractMutables (Mapper.js:33)
    at Mapper.js:30
    at Array.forEach (<anonymous>)
    at extractMutables (Mapper.js:30)
    at Mapper.extractMutablesFromArray (Mapper.js:38)
    at new Mapper (Mapper.js:8)
    at JSReanimated.startMapper (JSReanimated.js:61)
    at startMapper (core.js:233)
    at Hooks.js:449

After downgrading to 0.11, everything works as expected.

I don't see any API changes, so I am curious what's broken right now. Any clue?

      <ScrollLock isActive={lockActive}>
        <MotiView
          style={styles.container}
          from={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ type: "timing", duration: 400 }}
        >
            <Text style={styles.title}>{t("global:welcome")}</Text>
            <Text style={styles.subtitle}>{t("welcome:introtext")}</Text>

            <View style={styles.buttonContainer}>
              <StyledButton
                onPress={() => navigation.push("Register")}
                text={t("welcome:start tasting")}
              />
            </View>
        </MotiView>
      </ScrollLock>

Sorry, thats not a really helpful example, but from my perspective, it just breaks no matter what I do.

Even a single

        <MotiView
          style={styles.container}
          from={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ type: "timing", duration: 400 }}
        ></MotiView>

is enough to cause the error.
Expo Web. Not breaking on iOS or Android.

[nandorojo]

Oof. Let me see 😬

[hirbod]

I made a lot of "edits". TL;DR. Works perfectly on my devices, but not on web.

[nandorojo]

Mapper.js:33 Uncaught TypeError: Cannot convert undefined or null to object

This error indicates a reanimated babel plugin not working...could you try clearing your cache and everything and running web again? hmm, is this just expo web?

[hirbod]

I am using Expo web, yes. The plugins are configured. I mean, it's working just fine with 0.11, not 0.12.

[hirbod]

babel

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin', '@babel/plugin-syntax-dynamic-import'],
  };
};

webpack

const createExpoWebpackConfigAsync = require('@expo/webpack-config')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: { dangerouslyAddModulePathsToTranspile: ['moti', '@motify'] },
        // Passing true will enable the default Workbox + Expo SW configuration.
    },

        argv
    );
    // Customize the config before returning it.

    config.module.rules.push({
        test: /\.s[ac]ss$/i,
        use: [
            MiniCssExtractPlugin.loader,
            // Translates CSS into CommonJS
            "css-loader",
            // Compiles Sass to CSS
            "sass-loader",
        ],
    });


    config.plugins = config.plugins.concat(
        [
            new MiniCssExtractPlugin()
        ]
    );

    return config
}

[nandorojo]

I am seeing this on web too.

[nandorojo]

I see this. Haven't seen this error in ages. Will investigate.

[nandorojo]

Downgrading indeed fixes it. Ok...

[nandorojo]

Here's the comparison for reference: v0.11.0...v0.12.0

[nandorojo]

Okay I think I found the line breaking it. Investigating further.

[nandorojo]

Can you try 0.12.1?

[nandorojo]

Working for me.

Looks like the issue is Reanimated inconsistencies between useSharedValue on web and native. The way they pass around objects and such is quite tricky.