TypeORM pulls Native Modules on Browser import when using Metro

[husseinm]

TypeORM pulls Native Modules on Browser import when using Metro

[X] bug report
[ ] feature request
[ ] documentation issue

Database system/driver:

[ ] cordova
[ ] mongodb
[ ] mssql
[ ] mysql / mariadb
[ ] oracle
[ ] postgres
[ ] cockroachdb
[ ] sqlite
[ ] sqljs
[X] react-native
[X] expo

TypeORM version:

[X] latest
[X] @next
[X] 0.2.8 (or put your version here)

Steps to reproduce or a small repository showing the problem:

I have tested multiple versions of TypeORM (including the latest Master) and am receiving the following error in Metro:

error: Error: Unable to resolve module `path` from `node_modules/typeorm/browser/platform/PlatformTools.js`: path could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (/Users/mahdi/Documents/Code/PetroOutlet/supersonic/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (/Users/mahdi/Documents/Code/PetroOutlet/supersonic/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/mahdi/Documents/Code/PetroOutlet/supersonic/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/Users/mahdi/Documents/Code/PetroOutlet/supersonic/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /Users/mahdi/Documents/Code/PetroOutlet/supersonic/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/mahdi/Documents/Code/PetroOutlet/supersonic/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /Users/mahdi/Documents/Code/PetroOutlet/supersonic/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/mahdi/Documents/Code/PetroOutlet/supersonic/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

My current "metro.config.js":

const blacklist = require("metro-config/src/defaults/blacklist")

module.exports = {
  transformer: {
    assetPlugins: ["expo-asset/tools/hashAssetFiles"],
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    blacklistRE: blacklist([/typeorm\/(?!browser).*/, /typeorm$/]),
  },
}

My current "babel.config.js":

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/transform-react-jsx-source",
      "babel-plugin-transform-typescript-metadata",
    ],
    env: {
      production: {
        plugins: ["react-native-paper/babel"],
      },
    },
  }
}

Notes:

• I do import "reflect-metadata" early in the app (before registerRootComponent)
• Am running Expo Bare Workflow SDK 39 (basically RN 0.63.3)
• Have attempted TypeORM 0.2.25-28 & latest branch - all cause the same issue.
• Is a Typescript project (3.9.2)
• I am able to correct the issue (in a monkey patch way) and have been able to develop perfectly fine by commenting out all native module references (path, fs, etc.) & commenting out all other drivers that are not expo-sqlite when they are initially included by TypeORM
• Based on the above, I am willing to bet this is an issue with metro pulling the wrong PlatformTools (not PlatformToolsBrowser)
• I was able to reproduce this exact issue with this repo as a base: "Module fs is not recognized" - Node modules are pulled in by Metro Bundler using this Repo vinipachecov/react-native-typeorm-example#4

[imnotjames]

If this is with expo can it be replicated as a snack

[husseinm]

Probably, but I am ejected/using the Native/Bare Flow.

I was able to reproduce with this repo as a very bare-bones example:

https://github.com/vinipachecov/react-native-typeorm-example

[imnotjames]

Ok- I'll try pulling that down and taking a look. In the meantime, have you tried this metro option https://facebook.github.io/metro/docs/configuration/#resolvermainfields

[husseinm]

I have not, the Metro config above is what I currently use.

I do see there are various redirections in the package.json for TypeORM, but they are not being applied (based on what I saw in the above error message, the wrong PlatformTools is pulled)

Maybe resolverMainFields could work, but since TypeORM is a package with it's own package.json how would I reference those redirections from my main project (vs. node_modules)?

Also what about the babel config? I adjusted it (as well as metro) according to the TypeORM react-native example repo.

[imnotjames]

I think the babel config is fine either way - the published version of typeorm should not need much from babel as it's plain JS to a pretty old JS version.

The metro l change should apply to both node modules as well as your package. This should allow you to import "typeorm" directly (not the browser subdirectory) but I've not tried it yet. I'll be looking at this a bit later today depending on my network connectivity.

Automating packages anr testing for some if these more exotic environments is on the to-do list but we just haven't gotten to it yet.

[husseinm]

I made sure that all of my imports are definitely from the browser subpackage (that second repo also confirms it) & it's not a huge inconvenience to me to use the browser submodule so no worries there.

Like I said, something about the specific PlatformTools used is probably affecting this since (afaik) Metro doesn't do dead-code elimination/tree-shaking.

Thanks

[imnotjames]

I made sure that all of my imports are definitely from the browser subpackage (that second repo also confirms it) & it's not a huge inconvenience to me to use the browser submodule so no worries there.

Right - but those changes will pull in not just the items from that browser sub-package but the overrides for various things under the browser subpackage automatically. EG, replacing the browsertools.

[imnotjames]

Not blaming you or anyone on this - but what a flipping nightmare to get react-native set up for android! I ended up giving up and setting up android studio to manage all of it for me. I was so very spoiled by using expo. 😆

I packaged the master branch of TypeORM in the same way that 0.2.29 will be. I linked this to the project via yarn.

I could not replicate the issues you had - but there were two things I did that could help you:

I replaced all references to typeorm/browser with just typeorm. EG import TypeORM from "typeorm";

I updated the metro.config.js to contain the following:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
        resolver: {
            resolverMainFields: ['browser', 'main']
        },
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

Thing is, for the resolverMainFields - that's the default. So it should be using that already.

[imnotjames]

At this point, pretty sure it's not a typeorm issue. Let me know if you some agree and we can reopen.

If you'd like to chat about it in general including debugging etc, ping me on the community slack - cheers!

[husseinm]

Your updated configuration worked (I still reference typeorm/browser though in code).

Consider this closed, thank you!