Błąd "type is invalid -- expected a string or a class/function but got: number"

0

Cześć, przenoszę aplikację z RN 6 na RN 7 i po zainstalowaniu najnowszych wersji paczek i przeniesieniu całego kodu pojawia mi się taki błąd:

 ERROR  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: number.

Check the render method of `Loader`.
    in Loader (created by MainLoader)
    in RCTView (created by View)
    in View (created by MainLoader)
    in MainLoader (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in App (created by inject(App))
    in inject(App) (created by inject(App))
    in MobXProvider (created by StoreProvider)
    in StoreProvider
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

Z tego co wyczytałem może być to spowodowane błędnym importem albo exportem, ale nie widzę żadnego błędu w tym kodzie:

import React, { useRef, useEffect } from 'react';
import { View, Animated } from 'react-native';
import styles from './style';
import Bike from 'icons/bike.svg';


const Loader = () => {
  const loaderAnimation = useRef(new Animated.Value(0));

  useEffect(() => {
    Animated.loop(
      Animated.timing(loaderAnimation.current, {
        toValue: 100,
        duration: 3000,
        useNativeDriver: true,
      }),
      { iterations: -1 },
    ).start();
  }, []);

  const interpolatedRotate = loaderAnimation.current?.interpolate({
    inputRange: [0, 100],
    outputRange: ['0deg', '360deg'],
  });

  return (
    <View>
      <Animated.View
        style={[styles.spinnerContainer, { transform: [{ rotate: interpolatedRotate }] }]}>
        <Bike height={50} width={50} style={{ marginTop: -50 }} />
      </Animated.View>
    </View>
  );
};

export default Loader;

Przed przeniesieniem kodu aplikacja się odpalała. Proszę o pomoc, bo kompletnie nie mam pomysłu.

1

Nie mam pomysłu - poza binarnym poszukiwaniem błedu (usuwasz kawałki kodu - aż dojdziesz, które to powoduje błąd).
Ale polecam inne rozwiązanie poblemu - przerób to na TypeScript - zamiast jsx będzie tsx, + dodajesz tsconfig.json i kilka zmian (w sumie najlepiej wygenerować noty projekt z template i przekopiować) ale bonus jest taki, że kompilator będzie Ci często mówił gdzie jest problem.

0

Wbij się debuggerem (ewentualnie palnij console loga jak to jest odpalane w jakichś osobnych procesach) w miejsce, gdzie ten błąd leci i ustal, co to za liczba.

1 użytkowników online, w tym zalogowanych: 0, gości: 1