Typescript 由于导入解析错误，Expo生成失败

使用typescript获取解析错误

src/constants/Config.ts

export const Config = {
  auth0: {
    client_id: 'xxxx',
    connection: 'xxxx',
    url: 'https://xxxx.eu.auth0.com',
  },
};

在react native上使用expo，无法构建脚本

Unable to resolve "@src/constants/Config" from "src/containers/layouts/auth/signUp2/signUp2.component.tsx"
Failed building JavaScript bundle.

尝试与tsc一起构建，构建很好，但运行expo start会导致该错误

tsconfig

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/tsc-out",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "jsx": "react-native",
    "module": "es2015",
    "target": "es2017",
    "lib": [
      "es2015",
      "es2016"
    ],
    "paths": {
      "@src/*": ["./src/*"],
      "@kitten/*": ["./node_modules/react-native-ui-kitten/*"]
    },
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}

巴别塔

---

我在这里看到Kitten Tricks应用程序配置文件。使用别名的目的只是为这个应用程序提供一个开发环境，因为我们有时会使用它来查看react本机ui kitten更改。如果您仅在生产模式下使用它，您可以删除

/config

文件夹中的

dev.env.js

。

最终起作用的是设置babel config和tsconfig

尝试使用使其工作的相对路径，但如果它们不工作，那么使用别名又有什么意义呢！您可以使用babel配置完成此操作：

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/tsc-out",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "jsx": "react-native",
    "module": "es2015",
    "target": "es2017",
    "lib": [
      "es2015",
      "es2016"
    ],
    "paths": {
      "@src/*": ["./src/*"],
      "@kitten/*": ["./node_modules/react-native-ui-kitten/*"]
    },
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}

const path = require('path');
const Config = require('./config');

// FIXME: Resolve `transform[stderr]: Could not resolve` command-line warnings.
// FIXME: Reproducible when starting with clearing cache (npm start -- -c)
//
// TODO: Framework path aliasing even not needed here. Replace?
// TODO: Replace nested package.json-s with aliases

const moduleResolverConfig = {
  root: path.resolve('./'),
  alias: {
    '@kitten/theme': path.resolve(Config.KITTEN_PATH, 'theme'),
    '@kitten/ui': path.resolve(Config.KITTEN_PATH, 'ui'),
    '@eva-design/eva': path.resolve(Config.MAPPING_PATH),
    '@eva-design/processor': path.resolve(Config.PROCESSOR_PATH),
  },
};

module.exports = function (api) {
  api.cache(true);

  const presets = [
    'babel-preset-expo',
  ];

  const plugins = [
    ['module-resolver', moduleResolverConfig],
  ];

  return { presets, plugins };
};