I use custom fonts in my React Native App, and it goes perfect. But i need to add SVG files in it, so i added metro.config.js file with following code. After that i have an error: Unrecognized font family 'NunitoSemiBold' Does anybody know how that file metro.config.js can conflict with custom fonts?
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter(ext => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
};
})();
I had the exact same issue and I found a fix. My guess is that there is an issue when merging (probably not merging in that case) the metro-config written from react-native-svg-transformer and the default one from expo.
Anyway, after reading the expo doc page regarding customizing the metro config, I just changed the metro config package default config
yarn add -D #expo/metro-config
then I update the metro.config.js:
const { getDefaultConfig } = require('#expo/metro-config');
const {
resolver: { sourceExts, assetExts },
} = getDefaultConfig(__dirname);
module.exports = {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
};
Enjoy!
Try changing the source file for getDefaultConfig from metro-config to #expo/metro-config. Works well for me.
Ref: Expo doc
Related
While running yarn ios, build is getting created but after the app gets launched below error I'm getting
Error: Unable to resolve module ./index from /ProjectFolder/.:
None of these files exist:
index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
index/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/ProjectFolder/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:137:15)
at DependencyGraph.resolveDependency (/ProjectFolder/node_modules/metro/src/node-haste/DependencyGraph.js:260:43)
at /ProjectFolder/node_modules/metro/src/lib/transformHelpers.js:177:21
at Server._resolveRelativePath (/ProjectFolder/node_modules/metro/src/Server.js:1161:12)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Server.requestProcessor [as _processBundleRequest] (/ProjectFolder/node_modules/metro/src/Server.js:468:37)
at async Server._processRequest (/ProjectFolder/node_modules/metro/src/Server.js:390:9)
Our Project structure:
Refer the image
I have modified the project structure recently, do I need to make changes in metro.config.js
Contents of config file:
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig();
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
babelTransformerPath: require.resolve("./customTransformer.js"),
},
reporter: require("#dynatrace/react-native-plugin/lib/dynatrace-reporter"),
watchFolders: [
...monorepoMetroTools.watchFolders,
...[path.resolve(__dirname, "./node_modules")],
],
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"],
blockList: exclusionList(monorepoMetroTools.blockList),
extraNodeModules: {
...monorepoMetroTools.extraNodeModules,
},
},
};
})();
I'm trying to use SVG in my project with react-native-svg and react-native-svg-transformer
, but I'm getting error React is not defined in the SVG file.
These are my configurations
metro.config.js
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
const config1 =
{transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}}
const config2 ={
transformer: {
// eslint-disable-next-line #typescript-eslint/require-await
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true
}
}),
babelTransformerPath: require.resolve('react-native-typescript-transformer')
}}
return mergeConfig(config1, config2)
})();
declarations.d.ts
declare module "*.svg" {
import React from 'react';
import { SvgProps } from "react-native-svg";
const content: React.FC<SvgProps>;
export default content;
}
I have tried the command yarn start --reset-cache but it didn't work
I have integrated react-native-fbads in my React Native application. Now when i run the application, it runs and then shows this following error:
Error: While trying to resolve module `react-native-fbads` from file `/Users/tanmoysarker/musiczi-mobile/app/Ads/Fb Ads/BannerAds/index.js`, the package `/Users/tanmoysarker/musiczi-mobile/node_modules/react-native-fbads/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/tanmoysarker/musiczi-mobile/node_modules/react-native-fbads/dist/lib/index.js`. Indeed, none of these files exist:
I have no idea why this is happening. Here's my metro.config file :
const { getDefaultConfig } = require('metro-config')
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig()
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
}),
babelTransformerPath: require.resolve('react-native-svg-transformer')
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts,'jsx','js', 'ts', 'tsx', 'svg' ]
}
}
})()
How can I configure the metro.config.js of a monorepo containing multiple apps (in <root>/apps/) and packages (in <root>/packages/) to work for all apps in the monorepo? Each app has its own yarn workspace defined in the root package.json.
My current metro.config.js is:
const path = require("path");
const {getDefaultConfig} = require("metro-config");
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig(__dirname);
return {
projectRoot: path.resolve(__dirname),
watchFolders: [path.resolve(__dirname)],
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
babelTransformerPath: require.resolve("react-native-svg-transformer"),
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
},
};
})();
However, this setup seems to not load the node_modules packages of the apps (<root>/apps/<app-name>/node_modules), giving me an seemingly unrelated error (but after I move the config to the app folder, the app runs - but does not work, because it uses react-native-svg-transformer, which forces me to have metro.config.js in the monorepo root, otherwise it does not work).
I am building a react-native app with expo, I am using the modules of react-native-svg-transformer and also amplify (where I have created functions). The problem is that the functions in the amplify directory have package.json files and do not work. This is why I'm trying to put the amplify directory in the blocList of the metro configuration, but I keep getting the error:
Failed to construct transformer: TypeError: Transformer is not a constructor
This is my metro config:
const { getDefaultConfig } = require("expo/metro-config")
// extra config is needed to enable `react-native-svg-transformer`
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname)
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer"),
assetPlugins: ["expo-asset/tools/hashAssetFiles"],
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"],
blockList: [/amplify.*/]
},
}
})()
I also tried this but it didn't work either:
const { getDefaultConfig } = require("expo/metro-config")
// extra config is needed to enable `react-native-svg-transformer`
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname)
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer"),
experimentalImportSupport: false,
inlineRequires: true,
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"],
blockList: [/amplify.*/]
},
}
})()
It was that some packages used metro-config#0.59 and I npm-installed metro-config#0.61 so they were incompatible.