錯誤 app.default.object 不是 function

Question

我是 react-native 的新手，我正在嘗試幫助一個項目。 我首先重構代碼以獲得更好的文件結構。 我實現了桶並添加了路徑別名（模塊解析器）。 在 vscode 中一切正常，但是當我在 android 上運行時，它給了我這個錯誤：

TypeError:_app.default.objects 不是 function。 {...} _app.default.objects 未定義。

這是我的 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/*"],
    }

還有我的 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',
        },
      },
    ],
  ]

每次我使用數據庫時都會引發錯誤：這是我的導入：

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

如果我使用類似的東西：

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

但它與 db 目錄中的其他所有內容相同。

謝謝！

Answer 1

經過長時間調試，發現是我的配置文件babel.config.js（或者tsconfig.json，我不知道）有問題。

這對我有用：
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',
        },
      },
    ],
  ],
};