React-native: adding custom assets not possible metro.config.js does not recognize assets and assetExts

[Macilias]

I'm trying to use custom assets within a react native application. When doing as told within the documentation, and adding asset folders and the desired extensions to metro config I have two different failures depending on the version of react. Let's consider them Case A (our application):

"react": "16.8.6",
"react-native": "0.60.5",

and Case B (current)

"react": "16.9.0",
"react-native": "0.61.4"

In case Case A metro.config.js and react-native.config.js get silently ignored, while in Case B the following warning is presented:

● Validation Warning:

  Unknown option "assets" with value ["./src/assets/ai"] was found.
  This is probably a typing mistake. Fixing it will remove this message.

● Validation Warning:

  Unknown option "assetExts" with value [".xml", ".png", ".jpg", ".pb", ".tflite"] was found.
  This is probably a typing mistake. Fixing it will remove this message.

React Native version:

System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (4) x64 Intel(R) Core(TM) i3-4130 CPU @ 3.40GHz
    Memory: 821.38 MB / 11.62 GB
    Shell: 5.5.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - /usr/bin/node
    Yarn: 1.19.1 - /usr/bin/yarn
    npm: 6.12.0 - /usr/bin/npm
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce (Case B)

1. Create new react-native with: npx react-native init reactNativeTestapp
2. Create folders src/assets/ai/SomeFile.xml
3. Create js importing the asset file like:

const assets = {
  someFile: require('./ai/SomeFile.xml'),
};

1. run: react-native start
   

Describe what you expected to happen:
I expect the asset to be available within the application.

Snack, code example, screenshot, or link to a repository:

https://github.com/Macilias/ReactNativeAssetFail

[Macilias]

Update, I managed to get rid of the error by pointing to metro.config.js from app.json like this:

{
  "name": "reactNativeTestapp",
  "displayName": "reactNativeTestapp",
  "packagerOpts": {
    "config": "metro.config.js"
  }
}

and the content of the metro.config.js looks like this:

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    resolver: {
      assetExts: [assetExts, 'txt', 'xml', 'png', 'jpg', 'pb', 'tflite'],
      sourceExts: [...sourceExts, 'txt', 'xml', 'png', 'jpg', 'pb', 'tflite'],
    },
  };
})();

how ever the content of the xml file is not shown in the form App.js, it only prints a number maybe corresponding to the number of lines?! But how can I actually access the content of the file?

[divyangsolanki]

Error: 'resources/signature.js' cannot be loaded as its extension is not registered in assetExts
at /signExmpl/node_modules/metro/src/Assets.js:358:13
at Generator.next ()
at asyncGeneratorStep (/signExmpl/node_modules/metro/src/Assets.js:52:24)
at _next (/signExmpl/node_modules/metro/src/Assets.js:72:9)
at /signExmpl/node_modules/metro/src/Assets.js:77:7
at new Promise ()
at /signExmpl/node_modules/metro/src/Assets.js:69:12
at getAsset (/signExmpl/node_modules/metro/src/Assets.js:337:20)
at /signExmpl/node_modules/metro/src/Server.js:992:28
at Generator.next ()
I am getting above error because my html file contains
<script type="text/javascript" src="../resources/signature.js"></script>

Please help me to find the solution. I am using react native 0.61 version.

[sachinkhedkar]

Is there any one got the solution on it ".js cannot be loaded as its extension is not registered in assetExts"

[13387564366]

错误：无法加载“ resources / signature.js”，因为其扩展名未在位于/signExmpl/node_modules/metro/src/Assets.js:358:13
的assetExts
中注册，
位于asyncGeneratorStep（/ signExmpl / node_modules ）的Generator.next（）处/metro/src/Assets.js:52:24
在_next（/signExmpl/node_modules/metro/src/Assets.js:72:9）
在/signExmpl/node_modules/metro/src/Assets.js:77:7
在新的Promise（）
处在/signExmpl/node_modules/metro/src/Assets.js:69:12
在getAsset（/signExmpl/node_modules/metro/src/Assets.js:337:20）
在/ signExmpl / node_modules / metro / src / Server.js：992：28
在Generator.next（）上
，由于我的html文件包含
<script type="text/javascript" src="../resources/signature.js"></script>

请帮助我找到解决方案。我正在使用React Native 0.61版本。

我也是同样的问题啊

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.