android - Error app.default.object is not a function

Question

I am new to react-native and I'm trying to help on a project. I started by refactoring the code to have a better file structure. I implemented the barrels and added the path aliases (module resolver). Everything works fine in vscode but when I run on android, it gives me this error:

TypeError:_app.default.objects is not a function. {...} _app.default.objects is undefined.

Here is my tsconfig:

"baseUrl": ".",
    "paths": {
      "@assets/*": ["./app/assets/*"],
      "@components/*": ["./app/components/*"],
      "@components": ["./app/components"],
      "@containers/*": ["./app/containers/*"],
      "@db": ["./app/db"],
      "@db/*": ["./app/db/*"],
      "@languages/*": ["./app/languages/*"],
      "@navigation/*": ["./app/navigation/*"],
      "@styles/*": ["./app/styles/*"],
      "@services": ["./app/services"],
      "@services/*": ["./app/services/*"],
      "@utils": ["./app/utils"],
      "@utils/*": ["./app/utils/*"],
    }

And my babel-config:

  plugins: [
    [
      'module-resolver',
      {
        root: ['./app'],
        extensions: ['.ios.js', '.android.js', '.js', '.json', '.ts', '.tsx'],
        alias: {
          '@languages': './app/languages',
          '@db': './app/db',
          '@styles': './app/styles',
          '@services': './app/services',
          '@utils': './app/utils',
          '@assets': './app/assets',
          '@navigation': './app/navigation',
          '@components': './app/components',
          '@containers': './app/containers',
        },
      },
    ],
  ]

It raises the error each time I use the db: Here is my import:

import { Song } from '@db'
import { GlobalSettings } from "@db/GlobalSettings";

also if I use something like that:

const [songs, setSongs] = useState(Song.getAll())

but it's the same with everything else from the db directory.

Thanks!

Answer 1

After a long debugging, I found that it was a problem with my config files babel.config.js (or tsconfig.json, I don't know).

Here is what is working for me:
tsconfig.json

{
  "compilerOptions": {
    ...,
    "baseUrl": "./app/",
    "paths": {
      "@assets/*": ["assets/*"],
      "@components/*": ["components/*"],
      "@components": ["components"],
      "@containers/*": ["containers/*"],
      "@containers": ["containers"],
      "@db/*": ["db/*"],
      "@db": ["db"],
      "@languages/*": ["languages/*"],
      "@languages": ["languages"],
      "@navigation/*": ["navigation/*"],
      "@navigation": ["navigation"],
      "@styles/*": ["styles/*"],
      "@styles": ["styles"],
      "@services/*": ["services/*"],
      "@services": ["services"],
      "@utils/*": ["utils/*"],
      "@utils": ["utils"],
    },
   ...
  },
...
}

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./app'],
        alias: {
          '@languages': './app/languages',
          '@db': './app/db',
          '@styles': './app/styles',
          '@services': './app/services',
          '@utils': './app/utils',
          '@assets': './app/assets',
          '@navigation': './app/navigation',
          '@components': './app/components',
          '@containers': './app/containers',
        },
      },
    ],
  ],
};