TypeError: (0 , _stylis.middleware) is not a function

[Hyo]

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

Yarn

Summary

After adding mjs ext in webpack config as suggested in #863 (comment),

getRoutes.ts:298 Error loading route "./(tabs)/index.tsx" TypeError: (0 , _stylis.middleware) is not a function

Related Issue

I also posted issue in emotion-js/emotion#3073 and doubt that this happens in expo-router 🤔

Minimal reproducible example

I created a small repo in commit after Generated by create-expo-app 2.0.3. in https://github.com/hyochan/expo-router-49-stylis-error-reproduction.

[Mark Lawlor]

Oh that's unfortunate, last I tested stylis was working with the quickfix, something must of changed since then.

Being a quickfix, its not the actual fix - that's in @expo/metro-config@next. I tested your repo using the updated metro config package and it appears to be working. Just remove the 'quickfix' line from your config and run yarn add @expo/metro-config@next

I'm going to close this as it appears to be fixed, but you still have issues simply reply and we can reopen it.

[Hyo]

@marklawlor Finally it is working! Thanks.

[Hyo]

@marklawlor I am seeing another problem in my other repo which was fine in expo 48.

Do you have any idea how to resolve above?

ERROR in ./node_modules/@expo/metro-runtime/build/error-overlay/Data/parseLogBoxLog.js:10
Module not found: Can't resolve 'react-native/Libraries/UTFSequence'
   8 |
   9 | // @ts-expect-error
> 10 | import UTFSequence from "react-native/Libraries/UTFSequence";
  11 |
  12 | import parseErrorStack from "../modules/parseErrorStack";
  13 | import stringifySafe from "../modules/stringifySafe";

ERROR in ./node_modules/@expo/metro-runtime/build/error-overlay/modules/parseErrorStack/parseHermesStack.js:1
Module not found: Can't resolve 'react-native/Libraries/Core/Devtools/parseErrorStack'
> 1 | import parseErrorStack from "react-native/Libraries/Core/Devtools/parseErrorStack";
  2 |
  3 | export { parseErrorStack };
  4 |

ERROR in ./node_modules/expo-asset/build/Asset.js:2
Module not found: Can't resolve 'react-native/Libraries/Image/AssetRegistry'
  1 | import { Platform } from 'expo-modules-core';
> 2 | import { getAssetByID } from 'react-native/Libraries/Image/AssetRegistry';
  3 |
  4 | import { AssetMetadata, selectAssetSource } from './AssetSources';
  5 | import * as AssetUris from './AssetUris';

ERROR in ./node_modules/expo-asset/build/resolveAssetSource.web.js:1
Module not found: Can't resolve 'react-native/Libraries/Image/AssetRegistry'
> 1 | import { getAssetByID } from 'react-native/Libraries/Image/AssetRegistry';
  2 |
  3 | import AssetSourceResolver, { ResolvedAssetSource } from './AssetSourceResolver';
  4 |

ERROR in ./node_modules/expo-image/build/utils/resolveAssetSource.web.js:1
Module not found: Can't resolve 'react-native/Libraries/Image/AssetRegistry'
> 1 | import { getAssetByID } from 'react-native/Libraries/Image/AssetRegistry';
  2 |
  3 | import AssetSourceResolver, { ResolvedAssetSource } from './AssetSourceResolver.web';
  4 |

web compiled with 5 errors and 6 warnings

[Evan Bacon]

This looks like you're using Webpack again, Webpack does not support Expo Router.