I'm using React Native with Expo, which uses Babel + Metro. If it matters, I'm using Typescript.
I'm trying to import YAML files as text (or potentially an object, but I'd actually like the raw YAML for some more complex parsing). However, when I import
import data from "../data/myfile.yaml"
Data is a small number, not a string.
this person had the same issue, and the answer states:
To do this in Expo which uses babel.config.js which Metro uses you need to add the babel-plugin-content-transformer as a dev dependency and configure it as follows [...]
I've set it up, and it doesn't seem to be working, even though I've followed the answer and the documentation on the content transformer plugin. It seems to have no effect at all, *.yaml
s are still loaded as a number/resource ID.
My babel.config.js
looks like this:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
// to support loading yamls
// see https://stackoverflow.com/questions/64560601/import-yaml-file-in-react-native-results-in-number-1-instead-of-actual-content
plugins: [
['content-transformer', {
transformers: [{
file: /\.ya?ml$/,
format: 'string' // I've also tried format: 'yaml'
}]
}]
]
};
};
Any suggestions? I'd really like to leverage this plugin, especially its feature of loading in entire directories as an array. Thanks!
It's working now! All I had to do was clear the cache, with expo start -c
. Previously, I had tried deleting my .expo
folder and node modules, and it didn't work after that-- though it's possible I didn't do that correctly.
Anyhow, expo start -c
for anyone having this issue in the future.