React Native - babel.config.js别名看不到当前工作目录之外的文件

我的项目是莫诺雷波。有Web应用程序，移动的应用程序等文件夹。还有一个common文件夹，其中收集了所有可重用组件和实用程序。

<repo-name>
├── app // mobile app
│   ├── node_modules
│   ├── src
│   │   ├── views
│   │   │   ├── Homepage
│   │   │   │   └── index.tsx
│   │   └── App.tsx
│   ├── babel.config.js
│   ├── tsconfig.json
│   └── ...
├── common
│   ├── utils
│   │   └── format.ts
├── web
│   ├── app
│   │   ├── tsconfig.json
│   │   └── ...
│   ├── landing
│   │   ├── tsconfig.json
│   │   └── ...

App.tsx示意性地具有下一内容：

import React from "react"
import Homepage from "views/Homepage"
import { someFunction } from "@common/utils/format"

export default
class App
extends React.Component<any, any> {
    render() {
        return <>
            <h1>{someFunction("kappa")}</h1>
            <Homepage />
        <>
    }
}

移动的应用程序的tsconfig.json看起来像这样：

{
    "extends": "@tsconfig/react-native/tsconfig.json",
    "compilerOptions": {
        "baseUrl": ".",
        "experimentalDecorators": true,
        "useDefineForClassFields": true,
        "strictNullChecks": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "paths": {
            "@common/*": [
                "../common/*",
            ],
            "*": [
                "./src/*",
                "node_modules",
            ],
        }
    },
}

babel.config.js是这样的：

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        [
            "@babel/plugin-transform-flow-strip-types",
            { legacy: true },
        ],
        [
            "@babel/plugin-proposal-decorators",
            { legacy: true },
        ],
        [
            "@babel/plugin-proposal-class-properties",
            { "loose": false }
        ],
        [
            'module-resolver',
            {
                root: ['./src'],
                extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
                alias: {
                    "@common": "../common",
                }
            }
        ]
    ]
};

基本上，发生了什么。
我已经为要导入为@common/...的common文件夹内容创建了别名
此外，src文件夹中的所有内容都可以在没有相对路径的情况下导入。
tsconfig.json和babel.config.json中都配置了此别名。我使用的是VSCode，@common别名的自动完成功能完美无瑕。
但在运行时（在Metro CLI中），我得到这个错误：

Error: Unable to resolve module ../../common/utils/format from /home/<username>/projects/<project>/<repo-name>/app/src/App.tsx: 

None of these files exist:
  * ../common/utils/format(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * ../common/utils/format/index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

正如你所看到的，@common的路径已经被完美地解析了，但是由于某种原因，babel看不到format.ts文件。
我做错了什么？有什么注意事项或变通办法吗？任何帮助感激不尽。花了大约4个小时在这个问题上，没有发现任何有用的。先谢谢你了

好的，所以，基本上，这不是巴别塔的问题。原来Metro对项目外的文件夹一无所知。
你只需要在metro.config.js中添加watchFolders属性：

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const path = require("path")

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  // here we should set folders outside of the project folder
  // to be able to import modules from 'em
  watchFolders: [
    path.resolve(__dirname + "/../common")
  ]
};

两天的搜索和解决方案是，一如既往，只有4行
JavaScript打包器的美丽世界。
就这些了！
¯_（）_/¯

React Native - babel.config.js别名看不到当前工作目录之外的文件

1条答案

相关问题

热门标签

最新问答