How to make it work with workspaces?

[ospfranco]

Hi, this is a convoluted use case but I'm stuck and maybe you have an idea on how to solve this.

I'm using yarn workspaces on my repo, that is because I need to share some code between our desktop app and our mobile app. Everything works well, until I try to integrate rn-svg-transformer metro config, here is a diff of the changes:

You can see it is a mix of the changes in the README and a package I'm using which helps me ignore the hoisted dependencies from yarn workspaces.

The problem is, once metro starts packaging the code, it crawls one of the yarn workspace dependencies and then promptly fails with an error I have never seen, nor a clear cause for the issue:

Any idea what could be wrong here?

[kristerkari]

Thanks for all the details that you provided!

I don't have experience with Yarn workspaces, but hopefully there is someone else that could help you out.

[alidcast]

fyi this is working for me in monorepo

(initially had wrong config, so noticed this issue and figured I'd let you know it does work. im using latest expo/RN/metro)

const { getDefaultConfig } = require('expo/metro-config')
const path = require('path')

const projectRoot = __dirname

// Monorepo Support

const workspaceRoot = path.resolve(__dirname, '../..')

const nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
]

module.exports = (() => {
  const config = getDefaultConfig(projectRoot)

  const { transformer, resolver } = config

  config.transformer = {
    ...transformer,
    babelTransformerPath:  require.resolve("react-native-svg-transformer")
  }

  config.watchFolders = [workspaceRoot]

  config.resolver = {
    ...resolver,
    //  remove SVG as an asset
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    // add SVG as an import source
    sourceExts: [...resolver.sourceExts, "svg"],
    nodeModulesPaths,
  }

  console.log(config)
  return config
})()

[whalemare]

For those who can't figured out why .svgrrc config is not readed for monorepo setup, it's should met 2 conditions:

1. Your file should be named like .svgrrc because it loaded withcosmiconfig where module name is svgr

2. You should place your .svgrrc file in the same folder where you icons be. For example, if your monorepo structure should be like this:

apps
  myApp
packages
  myIcons
    src
    svg
      feed.svg
      search.svg
      .svgrrc <--- should be here