React-Native Metro bundler 无法提供任何文件

Question

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

捆绑服务器输出

地铁配置文件

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

我还尝试在浏览器中转到 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 没有帮助

Answer 1

尝试清理缓存并重试

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

Answer 2

请试试这个命令

npm cache clean

Answer 3

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

我不记得我是怎么想出来的，但在我的提交消息中，这个问题进入了我的视线，他们在评论中提到：

很快我们想强制所有监视文件夹都在 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以指向正确的目录存档相同）