Duplicated files or mocks, React Native’de bazı native yada npm paketlerini yüklediğimiz başlıkta yer alan hatayı alabiliyoruz. Tam olarak bu sorunu nasıl çözebiliriz bununla ilgili ufak bir bilgi paylaşımında bulunuyor olacağım.
Duplicated files or mocks – Hata Çözümü – React Native
React native’de bazen yüklediğimiz native paketler yada npm paketleri başlıkta belirttiğimiz ve detayını altta bulabileceğiniz hataya sebep olabilmektedir. Önereceğim 2 yöntem ile benim derdime derman olan bu yöntemler umarım sizinde sorununuzu kökten çözer. Öncelikle hızlıca bir hatanın detayına bir gözgezdirelim.
Hata
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | jest-haste-map: Haste module naming collision: ionic-material The following files share their name; please adjust your hasteImpl: * <rootDir>/ios/SampleLib.framework/www/lib/ionic-material/package.json * <rootDir>/android/app/build/intermediates/merged_assets/debug/out/ast_www/lib/ionic-material/package.json Failed to construct transformer: DuplicateError: Duplicated files or mocks. Please check the console for more info at setModule (/Users/muratoner/Desktop/backup/MyProjects/Mobile/todo/node_modules/metro/node_modules/jest-haste-map/build/index.js:620:17) at workerReply (/Users/muratoner/Desktop/backup/MyProjects/Mobile/todo/node_modules/metro/node_modules/jest-haste-map/build/index.js:691:9) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Promise.all (index 982) { mockPath1: 'ios/SampleLib.framework/www/lib/ionic-material/package.json', mockPath2: 'android/app/build/intermediates/merged_assets/debug/out/ast_www/lib/ionic-material/package.json' } Error: Duplicated files or mocks. Please check the console for more info at setModule (/Users/muratoner/Desktop/backup/MyProjects/Mobile/todo/node_modules/metro/node_modules/jest-haste-map/build/index.js:620:17) at workerReply (/Users/muratoner/Desktop/backup/MyProjects/Mobile/todo/node_modules/metro/node_modules/jest-haste-map/build/index.js:691:9) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Promise.all (index 982) Error: Duplicated files or mocks. Please check the console for more info at setModule (/Users/muratoner/Desktop/backup/MyProjects/Mobile/todo/node_modules/metro/node_modules/jest-haste-map/build/index.js:620:17) at workerReply (/Users/muratoner/Desktop/backup/MyProjects/Mobile/todo/node_modules/metro/node_modules/jest-haste-map/build/index.js:691:9) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Promise.all (index 982) ✨ Done in 60.31s. |
Üstteki hatada görebileceğiniz üzere toplamda 3 package.json dosyasına erişildiği için metro.config yada react-native-cli hangisini kullanacağına karar veremiyor ve duplicate hatası fırlatıyor. O zaman çözüm için bahsettiğim 2 yöntemi hızlıca görelim.
1.Yöntem
Altta sizlerle paylaştığım kod bloğu react native projenizin root dizininde yer alan rn-cli.config.js dosyasına ait değişikliklerdir.
1 2 3 4 5 6 7 | const blacklist = require('metro').createBlacklist; module.exports = { resolver: { blacklistRE: blacklist([/ionic-material\/.*/]), }, }; |
Üstteki kod bloğunda ionic-material benim duplicate olarak algılanan ve hata raporunda bana söylenen paketin adıdır. Sizde ki paketin adıyla değiştirmelisiniz.
2.Yöntem
Altta sizlerle paylaştığım kod bloğu react native projenizin root dizininde yer alan metro.config.js dosyasına ait değişikliklerdir.
1 2 3 4 5 6 7 8 9 10 11 12 13 | module.exports = { resolver: { blacklistRE: /ionic-material\/.*/ }, transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false, }, }), }, }; |
Üstteki kod bloğunda ionic-material benim duplicate olarak algılanan ve hata raporunda bana söylenen paketin adıdır. Sizde ki paketin adıyla değiştirmelisiniz.
Özet
React native’de karşılaşmış olduğum hatayı çözen yöntemleri sizlerle paylaştım. 2.Yöntem benim yaşadığım soruna kesin çözüm oldu. rn-cli-config.js yöntemini de başkalarına faydası dokunabilir diye ekledim ama benim işime yaramadığını ayrıca belirtmek isterim. Eğer bu 2 yöntem de işinize yaramadıysa yada sorununuzu çözmediyse, yorum alanından belirtirseniz yardımcı olmak isterim.
Burada hatanın sebebinin react-native bundle oluşturma aracı olan metro arasının birden fazla package.json ile karşılaşması durumunda hangisini kullanacağını bilememesinden kaynaklanan bir sorun olduğunu bilmek belki sorunu farklı yollardan çözmeniz açısında yararlı olabilir.
📚 Benzer Kaynaklar
- React Native AsyncStorage Kullanımı
- React Native Nedir? Ortam Nasıl Kurulur?
- React Native Make ile icon ve splash screen oluşturma
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
