React Native 与打字稿无法解析模块

Question

这很尴尬，但我不知道还能做什么。我想将我的小型 React Native 项目移植到 TypeScript，因此我使用 TypeScript 模板创建了一个空的 React Native 项目，并进行了调整tsconfig.json以使用自定义路径，例如@app，我尝试运行它。事实并非如此。这是昨天的事，我做了一些谷歌搜索，但是那些有同样问题的人建议清理打包程序，删除node_modules并重新安装所有软件包，例如这个，所以我这样做了，但它不起作用。

\n\n

这些是我重新安装的步骤react-native-cli（起初我以为问题出在过时的软件包上，但事实并非如此）：

\n\n

\n
• npm uninstall -g react-native-cli
\n
• yarn global add @react-native-community/cli
\n

\n\n

下面这些我已经关注过很多次了，我不记得确切的数字了：

\n\n

\n
• npx react-native init MyApp --template react-native-template-typescript
\n
• yarn add redux redux-logger redux-thunk react-redux
\n
• yarn add --dev @types/react @types/react-redux @types/redux-logger
\n

\n\n

然后进行更改tsconfig.json，所以它看起来像这样（我的更改标记为->）：

\n\n

{\n  "compilerOptions": {\n    /* Basic Options */\n    "target": "esnext",                       /* Specify ECMAScript target version: \'ES3\' (default), \'ES5\', \'ES2015\', \'ES2016\', \'ES2017\',\'ES2018\' or \'ESNEXT\'. */\n    "module": "esnext",                       /* Specify module code generation: \'none\', \'commonjs\', \'amd\', \'system\', \'umd\', \'es2015\', or \'ESNext\'. */\n    "lib": ["dom", "esnext"],                 /* Specify library files to be included in the compilation. */\n    "allowJs": true,                          /* Allow javascript files to be compiled. */\n    "jsx": "react-native",                    /* Specify JSX code generation: \'preserve\', \'react-native\', or \'react\'. */\n    "noEmit": true,                           /* Do not emit outputs. */\n    "incremental": true,                      /* Enable incremental compilation */\n    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to \'ts.transpileModule\'). */\n\n    /* Strict Type-Checking Options */\n    "strict": true,                           /* Enable all strict type-checking options. */\n\n    /* Module Resolution Options */\n    "moduleResolution": "node",               /* Specify module resolution strategy: \'node\' (Node.js) or \'classic\' (TypeScript pre-1.6). */\n->  "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */\n->  "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the \'baseUrl\'. */\n->    "@app/*": ["./*"]\n->  },\n    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */\n    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies \'allowSyntheticDefaultImports\'. */    \n  },\n  "exclude": [\n    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"\n  ]\n}\n

\n\n

我的项目结构如下所示：

\n\n

MyApp\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ios\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 android\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 constants\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 app.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 support   \n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 store.tsx   \n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 reducers   \n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.tsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 [ the rest ]\n

\n\n

当我尝试import {initStore} from \'@app/support/store\'在MyApp/src/index.tsx地铁里时，给了我以下信息：

\n\n

Loading dependency graph, done.\nerror: bundling failed: Error: Unable to resolve module `@app/support/store` from `src/index.tsx`: @app/support/store could not be found within the project.\n

\n\n

然后我尝试使用以下命令进行清理，但也没有任何好处：

\n\n

\n
• watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache
\n

\n\n

但是，有趣的是，在我调整之后tsconfig.json，Atom 不会抱怨像这样的路径@app/support/store，它甚至提供自动完成功能，它识别@app/support/为目录和@app/support/store脚本，所以我认为tsconfig.json这不是问题。

\n

Answer 1

看来问题出在 babel 配置上。你需要运行

yarn add --dev babel-plugin-module-resolver

安装 module-resolver 然后进行调整，babel.config.js使其看起来像这样：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '^@app/(.+)': './src/\\1',
        },
      },
    ],
  ],
}