metro.config.js

[mehmetnyarar]

• I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository [x] question about how to use this project

• Summary

I'm trying to make it work for the following RN project. As far as I read, rn-cli.config.js is replaced by metro.config.js, indeed setting up rn-cli changes nothing.

{
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.9"
  }
}

In metro.config.js, I did this:

const defaultConfig = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      }
    })
  }
}
const projectRoot = __dirname
const metroConfigHelper = require('react-native-monorepo-helper').metroConfigHelper
const helperConfig = metroConfigHelper(projectRoot)
  .typeScript(true)
  .watchFolder("shared")
  .defaultConfig({
    port: 8081
  })
  .generate()

module.exports = Object.assign({}, defaultConfig, helperConfig)

When I do yarn start, it seems the package finds the shared package, but I get error during bundling:

bundling failed: ReferenceError: SHA-1 for file /project/packages/native/App.json (/projectpackages/native/App.json) is not computed at DependencyGraph.getSha1 (/project/packages/native/node_modules/metro/src/node-haste/DependencyGraph.js:259:13) at /project/packages/native/node_modules/metro/src/DeltaBundler/Transformer.js:204:26

I've tried various alternatives in metro.config.js but it doesn't work so far...

I have the following package.json at the root:

{
  "name": "project",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/react",
      "**/react/**",
      "**/react-dom",
      "**/react-dom/**",
      "**/react-native-typescript-transformer",
      "**/react-native/**",
      "**/react-native",
      "**/react-native-scripts",
      "**/react-native-scripts/**",
      "**/expo",
      "**/expo/**"
    ]
  }
}

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

[flisboac]

Hello! I probably won't have time to take a look at this issue until the weekend. Until then, if you can, and have some time to make a POC repository with the reproduction of this error, even if just bare-bones, it would help me immensely!

I suppose the syntax is the same between rn-cli.config.js and metro.config.js (at root (export) level). It should just work, but if you're using Expo, I suppose it's doing something else behind the scenes that the tool is not prepared to deal with. (BTW, please confirm to me of you're indeed using Expo).

P.S.: I haven't tested the helper with Expo. Perhaps it's time to actually add support for (and test against) it (or at the very least analyse the feasibility).

[mehmetnyarar]

Hi @flisboac,

I've tried to use the helper with react-native.

Due to limited time, I had to iterate quickly with I was doing, so I've used wml for the moment. Though, I'm still interested with symlinks rather than watching and copying actual files, therefore I opened this issue.

By the way, later, I've also tried my luck with the new Expo SDK 33 and expo-yarn-workspaces and it took just 10 minutes to set it up. Still, it's expo and not react-native and I think a solution here will be valid for RN projects.

Thanks for your time.

[flisboac]

@mehmetnyarar Thanks for clarifying.

Although not ideal, I'm truly happy that you could find a solution to your problem (either with wml or expo, I'm not quite sure). But that doesn't mean I won't investigate the issue, I just need to find some time!

In the meantime, I've been googling this SHA-1 error, and so far it seems to be related to file extensions (in your case, the JSON file), as per this issue: facebook/metro#176. Could you try something along the lines of the following, and tell me if it works?

const defaultConfig = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      }
    })
  }
}
const projectRoot = __dirname
const metroConfigHelper = require('react-native-monorepo-helper').metroConfigHelper
const helperConfig = metroConfigHelper(projectRoot)
  .typeScript(true)
  .watchFolder("shared")
  .defaultConfig({
    port: 8081,
    // Put here all of your extra asset/source-code extensions;
    // it will be merged by the helper (including the ones necessary for
    // TS support, if any)
    assetExts: ["json"],
  })
  .generate()

module.exports = Object.assign({}, defaultConfig, helperConfig)

If this works, perhaps the helper is including an empty array and overwriting the default extensions when it really shouldn't be (even though it's unlikely). If it doesn't, I'll need to re-study Metro, as it seems they have rewritten the way configuration loading works.

If assetExts doesn't work, perhaps you could try sourceExts: ["json"] instead.

Or I could be wrong, and it's related to React Native 0.59 and all the changes it brought up, I'm not sure. :p

[zachariahtimothy]

@flisboac I received the same SHA error and tried your suggestion and it did not help. I may have a version mismatch though, I get a bunch of warnings about bad configuration values as well.

[flisboac]

@zachariahtimothy and @mehmetnyarar could you share a npm list (or yarn list)?

Unfortunately, I'm still a bit busy with my final project at university and some other urgent matters, so I don't know if I'll be able to give this issue the time it deserves. Also, I've been away from React altogether for some months now, so the solution may come later than I'd want it to... And for that, I'm sorry. I may have more free time by the end of the year.

In any case, though I won't be able to go hands-on on this, if anyone wants to volunteer to tackle this problem, I'll be more than happy to help as much as I can!

[morwalz]

@flisboac Hi, did you check it, with new react native package. I am unable to make it work