infinitered / reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://docs.infinite.red/reactotron/
MIT License
14.68k stars 934 forks source link

From version reactotron-react-native 5.0.5 #1451

Open Iuriy-Budnikov opened 3 months ago

Iuriy-Budnikov commented 3 months ago

Describe the bug

I'm getting an error when I run tests via jest in react native. I used an empty react native project with the latest react native.

SyntaxError: Cannot use import statement outside a module
Screenshot 2024-03-06 at 06 13 59

Reactotron version

5.1.3

phatmovista commented 3 months ago

I just installed the new version now and having the same issue as well

jonqwerty commented 1 month ago

I have the same issue with "reactotron-react-native": "^5.1.7".

morganick commented 1 month ago

After spinning up a fresh app with the following: https://reactnative.dev/docs/environment-setup#start-a-new-react-native-project-with-expo

I'm using yarn version 3.4.1 from corepack.

I'm able to run yarn test with passing tests while also having reactotron-react-native installed and running.

I think the missing piece may be the conditional require from here: https://docs.infinite.red/reactotron/quick-start/react-native/#step-3---add-reactotron-to-your-app

jonqwerty commented 1 month ago

Here is my case. App is create with expo + Type Script. package.json: "dependencies": { "@babel/plugin-proposal-export-namespace-from": "^7.18.9", "@react-native-async-storage/async-storage": "1.21.0", "@react-native-clipboard/clipboard": "^1.11.2", "@react-native-community/blur": "^4.3.2", "@react-native-community/hooks": "^2.8.1", "@react-native-community/netinfo": "11.1.0", "@react-native-masked-view/masked-view": "0.3.0", "@react-navigation/native": "^6.0.12", "@react-navigation/stack": "^6.2.3", "@reduxjs/toolkit": "^1.8.5", "@shopify/flash-list": "1.6.3", "axios": "^0.27.2", "babel-plugin-module-resolver": "^5.0.0", "expo": "^50.0.2", "expo-app-loading": "~2.1.0", "expo-application": "~5.8.3", "expo-build-properties": "~0.11.1", "expo-clipboard": "~5.0.1", "expo-constants": "~15.4.5", "expo-crypto": "~12.8.1", "expo-dev-client": "~3.3.11", "expo-device": "~5.9.3", "expo-font": "~11.10.2", "expo-linear-gradient": "~12.7.2", "expo-linking": "~6.2.2", "expo-location": "~16.5.5", "expo-notifications": "~0.27.6", "expo-secure-store": "~12.8.1", "expo-splash-screen": "~0.26.4", "expo-system-ui": "~2.9.3", "expo-tracking-transparency": "~3.3.0", "expo-web-browser": "~12.8.2", "i18next": "^23.7.12", "jest-expo": "~50.0.4", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.34.2", "react-i18next": "^11.18.5", "react-native": "0.73.6", "react-native-dotenv": "^3.3.1", "react-native-mmkv": "^2.11.0", "react-native-onboarding-swiper": "^1.2.0", "react-native-phone-number-input": "^2.1.0", "react-native-reanimated": "~3.6.2", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-svg": "14.1.0", "react-native-web": "~0.19.6", "react-redux": "^8.0.2" }, "devDependencies": { "@babel/core": "^7.12.9", "@react-native-community/eslint-config": "^3.2.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/react-native": "^12.4.4", "@types/babel__core": "^7.1.20", "@types/jest": "^29.2.4", "@types/react": "~18.2.45", "@types/react-native": "^0.71.1", "@types/react-test-renderer": "^18.0.7", "@types/redux-mock-store": "^1.0.6", "@typescript-eslint/eslint-plugin": "^5.46.1", "eslint": "^8.29.0", "husky": "^8.0.0", "jest": "^29.2.1", "prettier": "^2.7.1", "react-devtools": "^5.0.0", "react-test-renderer": "18.2.0", "reactotron-react-native": "^5.1.7", "reactotron-react-native-mmkv": "^0.2.6", "reactotron-redux": "^3.1.9", "redux-mock-store": "^1.5.4", "ts-jest": "^29.1.1", "typescript": "^5.3.0"}

I have jest tests. Tests had passed. But after I had connected Reactotron some of my tests failed. Screenshot_31

Screenshot_32

I configured Reactotron with your project:

Step 1 - Add Reactotron as DEV dependency I have added Reactotron on my React Native project as a dev dependency.

Step 2 - Initialization. My ReactotronConfig.js looks like : ` import Reactotron, { asyncStorage } from 'reactotron-react-native'; import { reactotronRedux } from 'reactotron-redux'; import mmkvPlugin from 'reactotron-react-native-mmkv';

import storageMMKV from '@services/mmkv/storageMMKV';

const storage = storageMMKV.storage;

const reactotron = Reactotron.configure({ name: 'Name app', }) .use(asyncStorage()) .use(mmkvPlugin({ storage })) .use(reactotronRedux()) .useReactNative({ asyncStorage: false, networking: { ignoreUrls: /symbolicate/, }, editor: false, errors: { veto: stackFrame => false }, overlay: false, }) .connect(); export default reactotron;`

Step 3 - Add Reactotron to your app I have imported ReactotronConfig.js in my App.ts Screenshot_30