无法解析在网络反应和移动反应原生项目之间共享的图像

编程问答 2022-05-27

问题描述

我在目录 web_with_weback（网络反应项目）中创建了一个自定义 npm 包。该包是使用 webpack 构建的，包含一个 .png 图像。该包是通过在另一个目录中使用 npm link 加载的，该目录是一个名为 mobile_with_metro 的 React Native 项目。简而言之，我想要一个 npm 包，它可以将图像从网络共享到移动设备。为了给您提供一些背景信息，以下是这两个项目的设置方式。

Web 项目具有以下结构。

enter image description here

index.ts 包含的位置：

import Testimage from './testimage.png';

export {
    Testimage
};

webpack.config.js

    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const copyPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: {
        images: {import: './src/images/index.ts',filename: 'images/index.js'}
    },externals: [nodeExternals()],output: {
        libraryTarget: 'commonjs'
    },plugins: [
        new CleanWebpackPlugin(),new copyPlugin({
            patterns: [
              { from: "src/images/index.d.ts",to: "images/index.d.ts" }
            ],}),],module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,exclude: /node_modules/,use: ['babel-loader']
            },{
                test: /\.(png|jpe?g|gif|svg)$/i,type: 'asset/inline'
            }
        ]
      }
  }

我使用 webpack (v5.19.0)。我使用 webapack asset/inline 的最新功能，它替代了之前使用的 url-loader。

webpack 构建后的

dist 文件夹如下所示。

enter image description here

通过使用 npm link 文件夹中的 dist 和 npm link @test/web_with_webpack 中的 mobile_with_metro，我可以在移动应用目录中使用构建的包。

现在，当我尝试导入图像并在 React Native 的 Image 组件中呈现它时，我收到以下错误：

    error: Error: Unable to resolve module `@test/web_with_webpack/images` from `App.tsx`: @test/web_with_webpack/images Could not be found within the project or in these directories:
  node_modules/@test/web_with_webpack

If you are sure the module exists,try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (/home/dpordan/dev/test_webpack_metro/mobile_with_metro/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (/home/dpordan/dev/test_webpack_metro/mobile_with_metro/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/home/dpordan/dev/test_webpack_metro/mobile_with_metro/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/home/dpordan/dev/test_webpack_metro/mobile_with_metro/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /home/dpordan/dev/test_webpack_metro/mobile_with_metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/home/dpordan/dev/test_webpack_metro/mobile_with_metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /home/dpordan/dev/test_webpack_metro/mobile_with_metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/dpordan/dev/test_webpack_metro/mobile_with_metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

这是导入图像的 react native App.tsx。

    import React from 'react';
    import {
        Image
    } from 'react-native';
    import {Testimage} from '@test/web_with_webpack/images';

    const App = () => {
        return (
            <>
                <Image source={{
                    uri: Testimage
                }}/>
            </>
        );
    };

对我来说，metro bundler 似乎无法理解 webpack 生成的图像“路径”。

这里有什么我遗漏的吗？

编辑：

我尝试在另一个 React Web 项目（使用 CRA 设置）中使用它并且它有效。所以，在构建的包中，有一些东西是 react native 中的 Metro bundler 不理解的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

metro-bundlerreact-nativereactjsreactjstypescripttypescriptwebpackwebpackwebpack