Metro: Is there a simple replacement for @providesModule?

[MattFoley]

Do you want to request a feature or report a bug?

Feature request, I think?

What is the current behavior?

I can no longer import myClass from "MyClass"; where said class contains @providesModule myClass.

I'm not sure if this is the right place to ask, but a commenter over in this issue suggested to ask the Metro team. I've used @providesModule since I started with React Native (~3 years ago) and now have a massive project. I'm looking to upgrade to the latest React Native version, but since @providesModule has been removed I'm not sure how to migrate my code base, short of modifying thousands of import statements.

Is there a way to easily enable this type of functionality?

[rubennorte]

We removed the support for @providesModule by default but you can use global modules the same way using the hasteImplModulePath option. You can see an example here: https://github.com/facebook/metro/blob/cdc9cbe89c9966a25314cc13971e547c12e9227a/packages/metro/src/DeltaBundler/__fixtures__/hasteImpl.js

I recommend you not to read the file to get the haste name from the @providesModule tag but extract it from the file name, as we do now at Facebook.

[MattFoley]

Thanks Rubén, I wasn’t able to find detailed documentation on this, but I see the property now specified in the Metro documentation. I’ll take a look.

Sent from my iPhone

On Dec 17, 2018, at 8:32 AM, Rubén Norte <[email protected][e-mail]> wrote:

We removed the support for @providesModule by default but you can use global modules the same way using the option. You can see an example here: https://github.com/facebook/metro/blob/cdc9cbe89c9966a25314cc13971e547c12e9227a/packages/metro/src/DeltaBundler/__fixtures__/hasteImpl.js

I recommend you not to read the file to get the haste name from the @providesModule tag but extract it from the file name, as we do now at Facebook.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/facebook/metro/issues/334#issuecomment-447908673, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABIJWgH_QbZO7qeeFw70JZTEj_VYk5Toks5u58csgaJpZM4ZVlwt.

[MattFoley]

@rubennorte Any chance you'd be willing to help me out just a bit more? I was working on trying to just get the basic @providesModule haste resolver you linked me working with Metro. I'm using RN, and and booting up my package server with just npm start. Attempting to add this to my package.json fails to find the module when booting up the package server:

  "metro": {
    "resolver": {
      "hasteImplModulePath":"./haste_resolver.js"
    }
  }

Error:

Loading dependency graph...(node:87574) UnhandledPromiseRejectionWarning: Error: Cannot find module '/haste_resolver.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/tjfallon/Code/react-native-animation-training/node_modules/metro/node_modules/jest-haste-map/build/worker.js:19:19)
    at Generator.next (<anonymous>)
    at step (/Users/tjfallon/Code/react-native-animation-training/node_modules/metro/node_modules/jest-haste-map/build/worker.js:192:30)
    at /Users/tjfallon/Code/react-native-animation-training/node_modules/metro/node_modules/jest-haste-map/build/worker.js:211:14
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/tjfallon/Code/react-native-animation-training/node_modules/metro/node_modules/jest-haste-map/build/worker.js:189:12)

I'm guessing this is because it's dynamically requiring this config file inside jest-hast-map's worker.js file. Am I maybe using this configuration incorrectly? e.g. should I instead be trying to use a custom npm start value, and be passing in options into React Native'scli.js start command?

I'll happily add some more info to the Metro docs once I figure this out.

[MattFoley]

@rubennorte I ended up just specifying ../../../ from worker.js to my haste-resolver.js file, a copy of the example you linked me to.

You can see I made some progress here, but it seems like once I get this running, it breaks how React Native is resolving its own modules, and I can't proceed. Here's an example project/branch. Going to keep digging WRT to worker.js to see if I can figure out why it breaks RN's solution, or how to debug this further.

[MattFoley]

Okay, that branch linked in my previous comment has been updated and is now a full working example!