TypeError: Cannot convert undefined or null to object (When I try run it on web browser with expo)

[codingki]

[nandorojo]

Duplicate of #10

If you want help, please upload a minimal repo example.

This should be solved in the latest version of Moti, is it not?

[nandorojo]

This seems like a reanimated issue; the stack trace is showing useAnimatedStyle, which is a Reanimated hook.

[codingki]

I use the latest version of Moti, its 0.4.1
here is the repo, I try to load minimal example of Moti but still not working on the web
https://github.com/codingki/react-native-touchable-moti-example

[codingki]

This seems like a reanimated issue; the stack trace is showing useAnimatedStyle, which is a Reanimated hook.

Yeah I think so

[nandorojo]

I'll see if I can get to the bottom of it, thanks!

[nandorojo]

@cmaycumber interestingly, this problem happens in an expo app, but not in our with-expo folder. Any reason come to mind that our example might not have the same problem? Is there any magic in the webpack?

I'm going to try upgrading RNW to see if that helps.

[nandorojo]

To reproduce this bug:

npx create-react-native-app -t with-moti
yarn web

[cmaycumber]

@cmaycumber interestingly, this problem happens in an expo app, but not in our with-expo folder. Any reason come to mind that our example might not have the same problem? Is there any magic in the webpack?

Maybe it could have something to do with the files after they're built by react-native-bob. The webpack resolves directly to the src/index.ts. That would be my best guess without looking at it.

I'll try to reproduce this on my end real quick. Let me know if upgrading RNW helps.

[cmaycumber]

What if we added the babel plugin for react-native-reanimated into the babel.config.js at the root that bob uses for the build?

[nandorojo]

Ohh interesting idea. Does Babel get used at a build step?

[nandorojo]

I find it odd that Moti doesn't have this issue in my Expo + Next.js app.

[cmaycumber]

I find it odd that Moti doesn't have this issue in my Expo + Next.js app.

Yeah, this is odd. I thought the same thing when you mentioned you use it in your app. I haven't started using it in mine but I expect I'd see the same problem.

Ohh interesting idea. Does Babel get used at a build step?

I think bob uses babel to compile all the source files when you run bob build. I could be mistaken though. I'm going to try to play around with the babel config that bob uses a bit.

[nandorojo]

It looks like Expo Web uses the lib/module folder. I use next-transpile-modules, so my guess is that next is using my Babel config on Moti and that's why it works.

@cmaycumber as you suggested, I think adding the Babel config in Bob could work. Let me know if you confirm that they use it.

[cmaycumber]

This is from the bob docs for the module target:

Enable compiling source files with Babel and use ES module system. This is essentially same as the commonjs target and accepts the same options, but leaves the import/export statements in your code.

This is useful for bundlers which understand ES modules and can tree-shake. The output file should be referenced in the module field of package.json.

Sadly, changing the babel config hasn't worked for me yet. After packing and running it locally but I'm going to clear my node_modules just in case.

[nandorojo]

Looking into the lib code of modules, it seems like it's no longer calling useAnimatedStyle, but instead a weird looking output from Bob's Babel build. My guess is, Reanimated's Babel plugin might be skipping over this because it doesn't recognize it.

What if we point to the commonJS folder instead? I'm not really familiar with the differences.

[nandorojo]

Alright, well I got it to work by adding this to the example:

1. npx create-react-native-app -t with-moti
2. yarn add -D babel-loader
3. Create a custom webpack.config.js file (shown below)
4. yarn web

webpack.config.js

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.module.rules.push({
    test: /\.(js|ts|tsx)$/,
    exclude: /node_modules\/(?!(moti|@motify)\/).*/,
    use: "babel-loader",
  });

  return config;
};

I don't love this solution, since it adds quite a bit of config to the user, and I'm not knowledgeable enough about webpack/babel to know if this is a good idea. Honestly, not sure.

That said, it does make the example start, so there is some progress.

Basically, the issue is, Reanimated's babel plugin is not applying to @motify/core (or moti for that matter.) We need it to apply to @motify/core/lib/module. Maybe there's a simpler way to do that than editing webpack?

---

@EvanBacon if you don't mind, could you tell me if the code sample above is a bad idea for Expo Web? I'm having a problem where Reanimated 2's Babel plugin isn't working on web, since the Babel plugin is ignoring Moti. It seems like I need a way to transpile Moti using our babel.config.js file, but I'm not an expert in Webpack/Babel.

If you aren't sure, I can open an issue on Reanimated. Thanks!

[nandorojo]

I opened a discussion here: software-mansion/react-native-reanimated#1715

[nandorojo]

@simpleshadow I saw you liked my comment – did this solution work for you, by chance?

[nandorojo]

I think I found the right answer, thanks to the @expo/webpack-config docs:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: { dangerouslyAddModulePathsToTranspile: ["moti"] },
    },
    argv
  );

  return config;
};

Expo lets you pass a custom set of node modules to transpile with dangerouslyAddModulePathsToTranspile, so that did it!

Could everyone here please try this solution?

[nandorojo]

Solution added to docs: https://moti-5qbvkhyh8.vercel.app/web#expo-web-support

[codinsonn]

I find it odd that Moti doesn't have this issue in my Expo + Next.js app.

Any pointers on avoiding useAnimatedStyle() breaking due to updater._closure being null in Next.js (12) serverside envs?

I'm not entirely sure where that ._closure is even supposed to come from, but my stack trace tells me the updater is something that's passed from @motify/core/lib/commonjs/use-map-animate-to-style.js

Show issue & stack trace

/node_modules/react-native-reanimated/src/reanimated2/Hooks.ts

To be clear, it does work on Expo Go & Expo Web (SDK 43) now, thanks to this GH issue, but not yet for Next.js

If no suggestion comes to mind, should I make another issue as this is related to use of moti in next.js?
(In which case I'll see if I can try to extract a minimal repro from my project)

Things already done / tried:

• All instructions from: https://moti.fyi/web
• All instructions from: https://moti.fyi/next
• All things suggested in this thread
• Updating moti, react-native-reanimated & @expo/next-adapter with expo install ... (no dice)
• Updating moti, react-native-reanimated & @expo/next-adapter with npm install ...@latest
• Making sure 'react-native-reanimated/plugin' is added to plugins in babel.config.js (already the case)
• Clearing node_modules & caches + reinstalling

Used versions & configs

"expo": "^43.0.0",
"moti": "^0.16.0",
"next": "^12.0.1",
"next-compose-plugins": "^2.2.1",
"next-transpile-modules": "^9.0.0",
"react-native-reanimated": "~2.2.0",
"@expo/next-adapter": "^3.1.6"
"@expo/webpack-config": "^0.16.6",
"typescript": "~4.3.5"

babel.config.js

module.exports = {
    presets: ['@expo/next-adapter/babel'],
    plugins: [
        'react-native-reanimated/plugin',
        '@babel/plugin-proposal-class-properties',
    ],
};

next.config.js

const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');
const withPlugins = require('next-compose-plugins');

const withTM = require('next-transpile-modules')([
  'moti',
  '@motify/core',
  '@motify/components',
]);

module.exports = withPlugins(
  [withTM, withFonts, [withExpo, { projectRoot: __dirname }]],
  {
    typescript: {
      ignoreBuildErrors: true,
    },
  },
);

Minimal repro issues

It's also very hard to create a minimal repro since @expo/next-adapter will install next.js 12 by default now, but issues with its babel config seems to keep next.js from opening a page 😅

1. npx create-react-native-app -t with-moti
2. expo upgrade -> Updates SDK 42 to 43
3. expo install @expo/next-adapter
4. yarn next-expo -> Testing this in-browser already seems to fail for some other babel plugin related reasons
5. TBD: stuck for now 🤷‍♂️

[nandorojo]

@codinsonn any shot you could try to clone this and use it to repro? https://github.com/axeldelafosse/expo-next-monorepo-example

[codinsonn]

@codinsonn any shot you could try to clone this and use it to repro? https://github.com/axeldelafosse/expo-next-monorepo-example

On it ⏳

[nandorojo]

I actually had this issue myself yesterday, but with normal reanimated. It seemed that passing null to useDerivedValue was breaking it for some reason. When I changed null to a number outside of the worklet, it got fixed.

[codinsonn]

@nandorojo Hmm, I seem to be unable to reproduce the issue with the monorepo you suggested 🤷‍♂️
https://github.com/codinsonn/moti-next12-monorepro

But, since it does seem to work there, I guess I'll try copying some of the configs and versions used to see if it fixes it in my current project. If I find what eventually was the issue, I'll post an update here ⏳

[nandorojo]

Yeah, I think it’s because expo and next requires a monorepo with separate entry points and very particular Babel configs (root of the monorepo, and a unique config in each entry point)