CODEWITHSUNDEEP
javascriptnode.jstypescriptreact-nativemetro-bundler
pledez
pledez

Reputation: 349

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.

This problem happens only after I upgraded from [email protected] 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:

[email protected] /Users/name/app/MyApp
├── [email protected]  extraneous
└─┬ [email protected]
  └─┬ @react-native-community/[email protected]
    ├── [email protected]
    └─┬ [email protected]
      └── [email protected]  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

Upvotes: 4

Views: 3782

Answers (3)

pledez
pledez

Reputation: 349

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)

Upvotes: 0

A.Almuqbil
A.Almuqbil

Reputation: 11

Please try this command

npm cache clean

Upvotes: 0

Daniel Gabor
Daniel Gabor

Reputation: 1526

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

Upvotes: 2

Related Questions