React-Native metro bundler can't serve any file

Question

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.

This problem happens only after I upgraded from react-native@0.57 to 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=... />

The module my-assets does exist and contains all assets needed

To start: node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts

The artifacts contains transpiled .js code from .ts

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

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

Answer 1

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

Answer 2

请试试这个命令

npm cache clean

Answer 3

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

---

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. And start the server from . using npx react-native start --skipflow --reset-cache to make sure everything is inside the root.

(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)