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

Question

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

这个问题是我从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

我也尝试在浏览器中转到 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

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

我不记得我是怎么想出来的，但在我的提交消息中有这个 issue come into my sight, and they mentioned at comment:

Very soon we want to force all watch folders to be inside the project root of metro, this way Metro can safely use the project root as the root of the http server that provides the assets and this will fix this issue

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

.
├── 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 以指向正确的目录以将其存档）

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

React-Native metro bundler can't serve any file

javascript

node.js

typescript

react-native

metro-bundler