由于导入解析错误，Expo 构建失败答案

【问题标题】：Expo build fails due to import resolution error由于导入解析错误，Expo 构建失败
【发布时间】：2020-02-18 10:28:36
【问题描述】：

打字稿出现分辨率错误

src/constants/Config.ts

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

import {Config} from '@src/constants/Config';

在 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"
  ]
}

通天塔

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 };
};

【问题讨论】：

尝试使用相对路径
这使它起作用了，但是如果别名不起作用，那又有什么意义呢！
你可以使用 babel config:github.com/janaagaard75/expo-and-typescript/issues/21

标签： typescript react-native expo

【解决方案1】：

我在这里看到了 Kitten Tricks 应用程序配置文件。拥有别名的目的只是为这个应用程序提供一个开发环境，因为我们有时会使用它来查看 react-native-ui-kitten 的更改。如果你只在生产模式下使用它，你可以删除./config文件夹中的dev.env.js。

【讨论】：

【解决方案2】：

最终的工作是设置 babel config 和 tsconfig

【讨论】：