adding custom assets not possible metro.config.js does not recognize assets and assetExts

See original GitHub issue

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)

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

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

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

Issue Analytics

State:
Created 4 years ago
Comments:7

Top GitHub Comments

3reactions

divyangsolankicommented, Jan 24, 2020

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 (<anonymous>) 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 (<anonymous>) 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 (<anonymous>) 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.

3reactions

Maciliascommented, Nov 21, 2019

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?