首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Expo和metro bundler:外部模块无法解析react导入

Expo和metro bundler:外部模块无法解析react导入
EN

Stack Overflow用户
提问于 2021-09-28 01:18:01
回答 1查看 428关注 0票数 0

我用extraNodeModules设置配置了metro.config.js,这样metro就可以在我的项目之外找到我的共享模块(一个'monorepo‘配置)。

Metro正在查找我的外部模块(参见下面的dumb-module ),但当该外部模块尝试导入react时,我得到了一个错误。当导入的模块没有导入react时,我没有得到错误。

下面是错误:

代码语言:javascript
运行
复制
Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/jim/.../modules/dumb-module/index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import React from 'react';
  2 | import { Text } from 'react-native';
  3 |
  4 | const DumbModule = () => {

因为它显示了dumb-module的内容,所以它显然能够找到我的外部模块。但是它看起来不能解析试图导入react的模块。

正如你所料,我什么都试过了。会很乐意在这里得到一些想法。

metro.config.js

代码语言:javascript
运行
复制
const path = require('path');

const extraNodeModules = {
    'modules': path.resolve(path.join(__dirname, '../../modules'))
};

const watchFolders = [
    path.resolve(path.join(__dirname, '../../modules'))
];

const nodeModulesPaths = [path.resolve(path.join(__dirname, './node_modules'))];

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: true,
                inlineRequires: true,
            },
        }),
    },
    resolver: {
        extraNodeModules,
        nodeModulesPaths
    },
    watchFolders
};

dumb-module/index.js

代码语言:javascript
运行
复制
import React from 'react';
import { Text } from 'react-native';

const DumbModule = () => {
    return (
        <Text>I am useless.</Text>
    );
};

export default DumbModule;

世博会诊断:

代码语言:javascript
运行
复制
expo diagnostics

  Expo CLI 4.12.0 environment info:
    System:
      OS: macOS 11.6
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
      Yarn: 1.22.11 - ~/.nvm/versions/node/v14.16.1/bin/yarn
      npm: 7.24.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
    Managers:
      CocoaPods: 1.11.2 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
    IDEs:
      Xcode: 13.0/13A233 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~42.0.1 => 42.0.4 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2 
      react-native-web: ~0.13.12 => 0.13.18 
    npmGlobalPackages:
      expo-cli: 4.12.0
    Expo Workflow: managed
EN

回答 1

Stack Overflow用户

发布于 2021-09-28 15:55:43

所以,这实际上工作得很好,我的问题是我没有正确地重置metro缓存。

我将把这篇文章留下来,因为这个metro.config.js是让一个expo应用程序在monorepo中工作并利用共享组件的解决方案的一部分。

另一部分是在expo应用程序文件夹上使用yarn的nohoist选项,这样它的依赖项就会保留在它的node_modules中。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69354736

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档