[英]React-Native metro bundler can't serve any file
The metro bundler can resolve the dependencies graph(the app starts in emulator) but can't resolve any assets so all images in the app are missing. Metro bundler 可以解析依赖关系图(应用程序在模拟器中启动),但无法解析任何资产,因此应用程序中的所有图像都丢失了。
This problem happens only after I upgraded from react-native@0.57 to 0.59这个问题只有在我从 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"
^^^ issue appears on navigating to any view that contains <Image source=... />
^^^ 问题出现在导航到包含<Image source=... />
任何视图时
The module my-assets
does exist and contains all assets needed模块my-assets
确实存在并包含所需的所有资产
To start: node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts
开始: node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts
The artifacts
contains transpiled .js
code from .ts
artifacts
包含从.ts
转译的.js
代码
My file structure looks like this我的文件结构是这样的
.
├── artifacts # transpiled js files
├── node_modules #npm modules
└── src # ts files
bundler server output捆绑服务器输出
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')
}
}
dependencies:依赖:
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
I also tried goto url in browser but also go 404 for both following request我还尝试在浏览器中转到 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
-- update -- - 更新 -
Cleaning cache and removing $TMPDIR does not help清理缓存和删除 $TMPDIR 没有帮助
Try to clean your cache and try again尝试清理缓存并重试
rm -rf $TMPDIR/react-native-packager-cache-*
rm -rf $TMPDIR/metro-bundler-cache-*
rm -rf $TMPDIR/haste-*;
yarn cache clean
请试试这个命令
npm cache clean
I see notification and then realized I asked this before我看到通知然后意识到我之前问过这个
I don't remember how did I figured that out but there in my commit message this 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很快我们想强制所有监视文件夹都在 Metro 的项目根目录中,这样 Metro 就可以安全地使用项目根目录作为提供资产的 http 服务器的根目录,这将解决这个问题
To solve that, I had to change my file structure from为了解决这个问题,我不得不改变我的文件结构
.
├── artifacts
├── node_modules
├── package.json
├── src
│ ├── index.ts
To:到:
.
├── artifacts
├── index.js # added this root level entry file
├── node_modules
├── src
│ ├── index.ts
What's in the newly added index.js
was just require('./artifacts/index.js')
which works as the entry file for metro.新添加的index.js
中的内容只是require('./artifacts/index.js')
作为 Metro 的入口文件。 And start the server from .
并从.
using npx react-native start --skipflow --reset-cache
to make sure everything is inside the root.使用npx react-native start --skipflow --reset-cache
确保一切都在根内。
(as mentioned in OP, we use node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts
to start metro server, so you can change --projectRoot
to point to a proper dir to archive the same) (如 OP 中所述,我们使用node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts
来启动 Metro 服务器,因此您可以更改--projectRoot
以指向正确的目录存档相同)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.