React本机Typescript路径别名无法解析模块

nhaq1z21 于 2022-12-19 发布在 React

关注(0)|答案(4)|浏览(141)

所以基本上，我使用RN主页中的命令行创建了我的React Native with Typescript：第一个月
之后，我运行了这个项目，它被成功地构建了。但是，当我添加路径别名来导入我的文件时，它抛出了一个错误：Unable to resolve module #folder/file from ... could not be found within the project or in these directories: node_modules
我已经遵循一些教程和错误解决谷歌，但我没有遇到运气。
这是我的.babelrc文件（我试图将文件从babel.config.js更改为.babelrc，因为一些解决程序说，但它仍然没有工作）

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx",
          ".android.js",
          ".android.tsx",
          ".ios.js",
          ".ios.tsx"
        ],
        "alias": {
          "#src/*": [
            "./src/*"
          ],
          "#configs/*": [
            "./src/config/*"
          ],
          "#actions/*": [
            "./src/redux/actions/*"
          ],
          "#reducers/*": [
            "./src/redux/reducers/*"
          ],
          "#store/*": [
            "./src/redux/store/*"
          ]
        }
      }
    ]
  ]
}

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext", 
    "module": "commonjs",
    "lib": [
      "ES2017",
      "DOM",
      "ES2015",
      "ES2015.Promise"
    ], 
    "allowJs": true, 
    "jsx": "react-native",
    "noEmit": true, 
    "incremental": true,
    "importHelpers": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": ".", 
    "paths": {
      "#src/*": [
        "src/*"
      ],
      "#configs/*": [
        "src/config/*"
      ],
      "#actions/*": [
        "src/redux/actions/*"
      ],
      "#reducers/*": [
        "src/redux/reducers/*"
      ],
      "#store/*": [
        "src/redux/store/*"
      ]
    }, 
    "types": ["jest"],
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true, 
    "skipLibCheck": false, 
    "resolveJsonModule": true 
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

我的文件夹和文件结构

├───assets
├───components
├───config
│       constants.ts
│
└───redux
    ├───actions
    │       index.ts
    │       stateActions.ts
    │
    ├───reducers
    │       index.ts
    │       stateReducer.ts
    │
    └───store
            index.ts

真的很期待收到你们的答案。非常感谢
如果你不介意的话，请看一下我的仓库：https://github.com/NotJackieTruong/rn_test_typescript

react-native

来源：https://stackoverflow.com/questions/70131607/react-native-typescript-path-alias-unable-to-resolve-module

4条答案

按热度按时间

6mzjoqzu1#

tsconfig.json

"baseUrl": ".", 
 "paths": {
      
      // this is for src directory
      "@*": ["src/*"],
      "@configs/*": ["src/config/*"
      ],

babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: [
            [
                "module-resolver",
                {
                    alias: {
                        "@config": "./src/config",
                         ....
                        
                    }
                }
            ]
        ]
    };
};

        }

赞(0）回复(0）举报 2022-12-19

aij0ehis2#

要实现这一点，只需将package.json文件添加到您要访问的每个目录中，其中包含一个属性name。

├───assets
└───components
    └───package.json

package.json含量：

{
  "name": "components"
}

然后您可以像这样导入：

import SomeComponent from 'components/SomeComponent';

还有一个good article描述了它是如何工作的。

赞(0）回复(0）举报 2022-12-19

m3eecexj3#

将此添加到您的tsconfig.json

"include": ["./src/**/*"]

然后重新启动TypeScript服务器
Cmd+Shift P然后选择TypeScript: Restart TS server
编辑：这是我正在使用的tsconfig.json，如果有帮助的话

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es6", "dom", "esnext"],
    "moduleResolution": "node",
    "baseUrl": ".",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "paths": {
      "@app/*": ["./src/*"]
    }
  },
  "include": ["src/**/*", "./App.tsx"],
  "extends": "expo/tsconfig.base"
}

赞(0）回复(0）举报 2022-12-19

fcwjkofz4#

在tsconfig.json中

{
...
   "compilerOptions":{
        ...
       "baseUrl":"."
       "paths":{
            "@folder": "src/folder" <--assuming app logic is in src/ 
        }
   }
}

在babel.config.js中

module.exports = {
...
  plugins: [
    ["module-resolver",{
      "alias":{
        "@folder": "./src/folder",
      }
    }]
  ],
};

从模拟器/设备卸载应用程序
重新启动Metro服务器yarn start --reset-cache
构建应用程序yarn run android/ios

赞(0）回复(0）举报 2022-12-19

我来回答

React本机Typescript路径别名无法解析模块

4条答案

相关问题

热门标签

最新问答