I am trying to build a react native project and it is giving me an asset path error. I checked and double checked everything and I can not figure out why I am getting this issue.
here is the error:
info Dev server ready
i - run on iOS
a - run on Android
d - open Dev Menu
r - reload app
info Opening app on iOS...
info A dev server is already running for this project on port 8081.
info Found Xcode workspace "Grubber.xcworkspace"
info Found booted iPhone 15 Pro Max
info Building (using "xcodebuild -workspace Grubber.xcworkspace -configuration Debug -scheme Grubber -destination id=0C686315-2040-48D2-8D24-97C5F4422F75")
success Successfully built the app
info Installing "/Users/omarjandali/Library/Developer/Xcode/DerivedData/Grubber-fmzgeggnhellaudxvdkwklgxliav/Build/Products/Debug-iphonesimulator/Grubber.app on iPhone 15 Pro Max"
info Launching "app.grubber.grubber"
success Successfully launched the app on the simulator
BUNDLE ./index.js
error: Error: Unable to resolve module missing-asset-registry-path from /Users/omarjandali/GrubberLLC/Grubber/src/Assets/Verified-icon.png: missing-asset-registry-path could not be found within the project or in these directories:
node_modules
> 1 | �PNG
2 |
3 |
4 | IHDR��>a�tEXtSoftwareAdobe ImageReadyq�e<�IDATx���U�0G���{H7� &H�� �4� aؠ��l��+2$&;��?����cHBpt�e9�� �c�}�?��Gvqf�I�{[�_�� _�W��v�ti�LF ��]�4�����t�W#��n
�uK`��[|����_���%0��-��n
�uK`��[���]
=�eyV/��l�yqe�Z%'��~`��=���Ζk+�s�X�#��i�켋 ����7t�o^��HK�pu_
���zɩ���x�/[�o���"}�o>��v��5e';�>�&�g�瓚�BW��[��=2��0��@@� A@� A�w9���uݷ�(]mi5*�_��{geˏ�m8�w[�^R�����ʞn���,��� �p�%I0�?�7`�2�:�4B>�?�kY^���{�_�������(�u��
���KL��?���/����ٺ;0��
at ModuleResolver.resolveDependency (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
at DependencyGraph.resolveDependency (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
at /Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/lib/transformHelpers.js:156:21
at resolveDependencies (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
at visit (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 12)
at async visit (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 3)
at async visit (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
Here is my metro.config.js file:
const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const {
resolver: { assetExts, sourceExts },
} = await getDefaultConfig();
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
assetExts: [...assetExts, 'png', 'jpg', 'jpeg'],
sourceExts: [...sourceExts, 'jsx', 'js', 'ts', 'tsx'],
},
};
})();
I am importing the images here:
const Verified = require('../../Assets/Verified-icon.png');
The path to the images is correct and the file name is correct. It is just not accepting the image for some reason.