Transformer for asset does not work #176
Comments
|
Thanks for reporting the issue @kruyvanna ! I've cloned your test repo and found a couple of things that need to be changed to be able to run the SVG transformer correctly. I've prepared a commit to show you these changes: rafeca/metro-asset-transformer-test@b5b8034 EDIT: all the text below is not relevant anymore
//getAssetExts(defaultExts) {
// // remove "svg" and add "jpegg"
// return defaultExts.filter(ext !== 'svg').concat('jpegg');
//}
|
|
@rafeca Thanks for the detail instruction. |
|
I created my own SVG transformer based on the same idea. It uses I'm planning on switching to using https://github.com/kristerkari/react-native-svg-transformer |
|
I just want to give an update since many things happened since I wrote that message in May: we've recently rewritten the Metro configuration loading logic (you can read about the new config here) so the limitation regarding the default assets does not exist anymore. With latest Metro you can define the asset extensions that you want without having to care about the default ones, so please ignore most of my previous message 😄 |
|
Closing this issue since with the new Metro API it should be solved |
|
@rafeca I saw some Metro configuration changes in React Native's repo. Do you know if those are going to fix the issue on React Native's side? |
|
Yes, they fix it |
|
I'm having problems to get the new Metro configuration to work. I have been trying out the 0.57.0-rc.2 version of React Native, which also includes the new Metro config. I'm using a working 0.56.0 project as the base. I've read the code changes from React Native's side and the updated docs for Metro, and based on that my updated module.exports = {
transformModulePath: require.resolve("react-native-svg-transformer"),
resolver: {
sourceExts: ["svg"]
}
};The new config however just makes Metro throw an error: @rafeca do you have any ideas why that might happen? |
|
@kristerkari : this is usually caused by |
|
@rafeca it's still happening with rc4 |
|
@rafeca Here are the changes and the branch if you want to have a look at it: |
|
Oh I see now, the issue comes from the fact that making To fix this, you can get the default source extensions and just append const {getDefaultConfig} = require('metro');
module.exports = (async () => {
const {resolver: {sourceExts}} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
sourceExts: [...sourceExts, 'svg'],
},
};
})();I acknowledge that this is not very nice to type... @CompuIves could we make it easier to extend the config object? |
|
Would it be possible to have some config property that would just add the file extension to the default ones instead of replacing them? Would be great to keep the config as simple as my previous example: module.exports = {
transformModulePath: require.resolve("react-native-svg-transformer"),
resolver: {
sourceExts: ["svg"]
}
}; |
|
I managed to get the The config to do that is very verbose because I also need to modify const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();That's pretty difficult to understand for someone who is not familiar with Metro at all. |
|
Hi Guys! I'm getting a |
|
Hi guys! I am so glad I stumbled upon this issue. It managed to put me on the right track. I am trying to add .pb and .txt assets to my project for a tensorflow integration. The above configuration works, but it behaves strange in my case. If I only add a single optional extension it works as expected, but if I try to add 2 it throws an error. For example, the code below throws an error: const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const {
resolver: { assetExts }
} = await getDefaultConfig();
return {
resolver: {
assetExts: [...assetExts, 'pb', 'txt']
}
};
})();And the error is: If I remove one of the extensions: assetExts: [...assetExts, 'pb']the bundle is created, but I need both extensions in order to have the application working. Maybe someone has/had a similar problem and can manage to help me. |
|
@isbirkan I've been working on a similar project and the following works for me in I followed the documentation at https://facebook.github.io/metro/docs/en/configuration. Hope this helps. |
|
Hi @sometimescasey! Thank you very much! It works! I have tried this in the past, but I think I omitted 'jpg' and since I know it was a default asset extension I just tried to extend the config as others have done before. But this is ok and since it works it is all I need. |
|
I have similar error when I enable ram bundle on android "metro-react-native-babel-preset": "^0.50.0" also on 0.51.1 |
|
+1 |
|
Hey guys! According to these logs, looks like Here's my full const { resolve } = require('path');
const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
projectRoot: resolve(__dirname),
watchFolders: [
resolve(__dirname, '../common'),
],
transformer: {
// that's my custom transformer in which I won't receive svg files
babelTransformerPath: require.resolve('./metro.transformer.js'),
},
resolver: {
// I've made sure extensions got updated
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"],
// below is for using external common folder with shared code
extraNodeModules: {
common: resolve(__dirname, '../common'),
mobx: resolve(__dirname, 'node_modules/mobx'),
tslib: resolve(__dirname, 'node_modules/tslib'),
'@babel/runtime': resolve(__dirname, 'node_modules/@babel/runtime'),
'firebase': resolve(__dirname, 'node_modules/firebase'),
},
},
};
})();Please give me an idea what could go wrong! Thanks in advance! |
|
@idudinov Are you using the newest version of React Native? It seems that something has changed, so that the transformers are not working, but I have not had time yet to look at the problem. |
|
Oh sorry I just noticed that you wrote that you are using Expo 33 |
|
Just for reference, Expo 33 uses React Native 0.59.8. |
|
Also I've tried to replace One thing I think of could change during these days – I've updated XCode to 10.3. Will try to check on macs with previous version of it. |
|
Phew! Downgrading XCode did not help, but downgrading Expo CLI did. Replaced |
Can confirm that doing the downgrading got the thing working. |
|
@idudinov @fdagostino the docs for |
Thanks @kristerkari, worked fine! |
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
I am trying to create a transformer that process .svg files.
Currently it only feed .js files to the transformer not .svg files
If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can
yarn installandyarn test.Minimal repository:
https://github.com/kruyvanna/metro-asset-transformer-test
What is the expected behavior?
transformer.transform get called with .svg file
Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.
i have rn-cli.config.js with the following content
node: v8.9.1
yarn: 1.7.0
npm: 5.6.0
react-native-cli: 2.0.1
react-native: 0.55.4
The text was updated successfully, but these errors were encountered: