React-Native Metro 捆绑器无法提供任何文件

Posted 2023-03-13

【中文标题】React-Native Metro 捆绑器无法提供任何文件

【英文标题】：React-Native metro bundler can't serve any file

【发布时间】：2020-01-03 10:07:01

【问题描述】：

metro bundler 可以解析依赖关系图（应用在模拟器中启动），但无法解析任何资产，因此应用中的所有图像都丢失了。

只有在我从 react-native@0.57 升级到 0.59 后才会出现此问题

Looking for JS files in
   /Users/name/app/MyApp/artifacts
   /Users/name/app/MyApp/node_modules

warning: the transform cache was reset.
Loading dependency graph, done.
 DELTA  [android, dev] artifacts/index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (2921/2921), done.

 MAP  [android, dev] artifacts/index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.


::ffff:127.0.0.1 - - [30/Aug/2019:06:27:17 +0000] "GET /node_modules/my-assets/artifacts/assets/images/Logo.png?platform=android&hash=someHash HTTP/1.1" 404 221 "-" "okhttp/3.12.1"

^^^ 问题出现在导航到包含<Image source=... />的任何视图时

模块my-assets 确实存在并包含所有需要的资产

开始：node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts

artifacts 包含从.ts 转译的.js 代码

我的文件结构是这样的

.
├── artifacts # transpiled js files
├── node_modules #npm modules
└── src # ts files

捆绑服务器输出

metro.config.js

module.exports = 
    watchFolders: [path.join(__dirname, 'node_modules')],
    transformer: 
        getTransformOptions: async () => (
            transform: 
                experimentalImportSupport: false,
                inlineRequires: false
            
        )
    ,
    resolver: 
        blacklistRE: blacklist([       /node_modules\/.*\/node_modules\/react-native\/.*/]),
        assetRegistryPath: path.resolve('node_modules/react-native/Libraries/Image/AssetRegistry')
    

依赖：

my-app@1.0 /Users/name/app/MyApp
├── metro@0.48.5  extraneous
└─┬ react-native@0.59.4
  └─┬ @react-native-community/cli@1.11.2
    ├── metro@0.51.1
    └─┬ metro-config@0.51.1
      └── metro@0.51.1  deduped

我也在浏览器中尝试了 goto url，但也为以下两个请求转到 404

http://localhost:8081/node_modules/my-assets/artifacts/assets/images/Logo.png?platform=android&hash=someHash

http://localhost:8081/node_modules/metro/src/Bundler/util.js # request to any js file also return 404

-- 更新--

清理缓存和删除 $TMPDIR 没有帮助

【参考方案1】：

尝试清理缓存并重试

rm -rf $TMPDIR/react-native-packager-cache-*
rm -rf $TMPDIR/metro-bundler-cache-* 
rm -rf $TMPDIR/haste-*;
yarn cache clean

【讨论】：

command rm -rf $TMPDIR/haste-*; 为我工作。

【参考方案2】：

请试试这个命令

npm cache clean

【参考方案3】：

我看到通知，然后意识到我之前问过这个

我不记得我是怎么想出来的，但在我的提交消息中，issue 出现在我的视线中，他们在comment 中提到：

很快我们要强制所有监视文件夹位于 Metro 的项目根目录中，这样 Metro 可以安全地使用项目根目录作为提供资产的 http 服务器的根目录，这将解决此问题

---

为了解决这个问题，我不得不改变我的文件结构

.
├── artifacts
├── node_modules
├── package.json
├── src
│   ├── index.ts

收件人：

.
├── artifacts
├── index.js # added this root level entry file
├── node_modules
├── src
│   ├── index.ts

新添加的index.js 中的内容只是require('./artifacts/index.js')，它用作metro 的入口文件。并使用npx react-native start --skipflow --reset-cache 从. 启动服务器，以确保所有内容都在根目录内。

（如 OP 中所述，我们使用 node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts 启动 Metro 服务器，因此您可以更改 --projectRoot 以指向正确的目录来存档）