./node_modules/n/nds-native/theme/theme.tsx 16:7Module parse failed: Unexpected token (16:7)You may need an appropriate loader to handle this file type.| const THEME_MODE_V1 = 'themeModeV1';| > export interface ThemeProps {| theme: Record<ThemeColor, string>;| }Trying to import some typescript colors/themes to my react native expo app and it seems to be some fundamental import error since the line that throws the error is just an interface.
My package.json:
"browserslist": [">0.2%","not dead","not op_mini all" ],"eslintConfig": {"extends": "react-app" },"dependencies": {"@sentry/browser": "^4.6.3","@types/expo": "^31.0.7","@types/googlemaps": "^3.30.16","@types/history": "^4.7.2","@types/jest": "^23.3.12","@types/memoize-one": "^4.1.0","@types/node": "^10.12.18","@types/react": "^16.8.0","@types/react-dom": "^16.8.0","@types/react-native": "^0.57.50","@types/react-redux": "^7.0.0","@types/react-router-dom": "^4.3.1","@types/react-router-native": "^4.2.3","@types/styled-components": "^5.1.0","@n/nds-native": "../nds-native","@react-native-async-storage/async-storage": "^1.15.17","luxon": "^1.25.0","react-native-device-info": "^8.4.8","react-native-material-menu": "^2.0.0","react-native-navigation-bar-color": "^2.0.1","react-native-svg": "^12.1.1","axios": "^0.18.0","expo": "^32.0.0","history": "^4.9.0","logrocket": "^0.6.19","memoize-one": "^5.0.0","modal-enhanced-react-native-web": "^0.2.0","modern-normalize": "^0.5.0","react": "16.8.6","react-app-polyfill": "^1.0.1","react-dom": "16.8.6","react-ga": "^2.5.7","react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz","react-native-fit-image": "^1.5.4","react-native-gesture-handler": "^1.0.12","react-native-modal": "^7.0.2","react-native-web": "~0.11.7","react-redux": "^6.0.0","react-router": "^4.3.1","react-router-dom": "^4.3.1","react-router-native": "^4.3.0","react-scripts": "2.1.3","react-spring": "^7.2.8","react-with-gesture": "^4.0.2","redux": "^4.0.1","redux-devtools-extension": "^2.13.7","redux-saga": "^0.16.2","reselect": "^4.0.0","resize-observer-polyfill": "^1.5.1","styled-components": "^5.1.0","svgs": "^4.0.0","typesafe-actions": "^3.0.0","typescript": "^3.5.3" },"devDependencies": {"babel-preset-expo": "^5.0.0","dat.gui": "^0.7.5","eslint-plugin-react-hooks": "^1.6.0","prettier": "~1.16.4","serve": "^11.1.0","tslint": "^5.12.1","tslint-config-prettier": "^1.17.0","tslint-plugin-prettier": "^2.0.1","tslint-react": "^3.6.0" },"resolutions": {"typescript": "3.9.10" }}and my tsconfig.json:
{"compilerOptions": {"target": "es6","lib": ["dom","ES6","dom.iterable","es2019" ],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"experimentalDecorators": true,"jsx": "preserve" },"include": ["src" ]}This issue looks like it's popped up a few times in the past too but none of the solutions work for me. Previously recommended actions are switching "jsx": preserve to "jsx": react and updating the browsers list in package.json. Thanks in advance.