ARTICLE AD BOX
I get the following error after running npx expo start --dev-client to start my react native expo app:
SyntaxError in node_modules/react-freeze/src/index.tsx: Unexpected token, expected "," (8:1)
It seems Metro is trying to process TypeScript that it doesn't understand. Metro requires pre-compiled JavaScript.
I hadn't updated any dependencies, so it couldn't have introduced changes that require TypeScript files to be processed differently, or modified metro.config.js. I also hadn't changed any libraries, so none could contain uncompiled TypeScript files instead of precompiled JavaScript that would require Metro to handle .tsx files which would lead to errors if the TypeScript syntax is unsupported.
Babel and Metro hadn't been changed, so they shouldn't be processing previously ignored files. I didn't add any new dependencies or update existing ones, so TypeScript files couldn't have been introduced that Metro is now trying to process.
I had a similar error for a different library, but after modifying my metro.config.js and babel.config.js files it didn't come back, but now I get the same type of error for react-freeze.
My current metro.config.js:
// Learn more https://docs.expo.io/guides/customizing-metro const { getDefaultConfig } = require('expo/metro-config'); const exclusionList = require('metro-config/src/defaults/exclusionList'); /** @type {import('expo/metro-config').MetroConfig} */ const defaultConfig = getDefaultConfig(__dirname); module.exports = { ...defaultConfig, transformer: { babelTransformerPath: require.resolve('metro-react-native-babel-transformer'), assetPlugins: ['expo-asset/tools/hashAssetFiles'], getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true, }, }), }, resolver: { ...defaultConfig.resolver, extraNodeModules: { ...defaultConfig.resolver.extraNodeModules, // Add any custom mappings if needed }, sourceExts: [ ...defaultConfig.resolver.sourceExts, 'js', 'jsx', 'json', 'cjs' ], assetExts: [...defaultConfig.resolver.assetExts, 'ttf', 'webp'], blacklistRE: exclusionList([/node_modules\/react-freeze\/.*/]), } }; defaultConfig.resolver.assetExts.push('ttf', 'webp'); module.exports = defaultConfig;My current babel.config.js:
module.exports = function (api) { api.cache(true); return { presets: [ "babel-preset-expo", "@babel/preset-flow", ["module:metro-react-native-babel-preset", { "useTransformReactJSXExperimental": true }], "@babel/preset-typescript" ], plugins: [ "react-native-reanimated/plugin", "@babel/plugin-transform-flow-strip-types", "@babel/plugin-transform-modules-commonjs" ], ignore: [ /node_modules\/(?!react-native|@react-native|react-clone-referenced-element|@react-native-community|expo|@expo|react-navigation|@react-navigation|@unimodules|unimodules|sentry-expo|native-base|@testing-library|react-native)/, ], }; };Expo: 52.0.47
React Native: 0.76.9
Metro: 0.81.5
Metro Config: 0.81.5
metro-react-native-babel-preset: ^0.77.0
metro-react-native-babel-transformer: ^0.77.0
