metro server start but use http url can not fetch bundle

[alexxxcs1]

node version: v14.15.1
os: mac os 12.5 (21G72)

start metro server code

import path from "path";
import Express from "express";
import { loadConfig } from "metro-config";
import Metro from 'metro';
import fs from 'fs';

const app = Express();
const server = require('http').Server(app);
const staticDir = path.join(__dirname, './static');

export const useMetroServer = async () => {
    const baseConfig = await loadConfig();
    const config = Object.assign({}, baseConfig, {
        projectRoot: path.resolve(__dirname, '../client'),
        transformer: {
            ...baseConfig.transformer,
            babelTransformerPath: path.resolve(__dirname, './transformer/base')
        },
        server: {
            ...baseConfig.server,
            port: 3001,
        },
        watch:true 
    });
    console.log("%c 🧀 config", "color:#fca650", config);
    // @ts-ignore
    const connectMiddleware = await Metro.createConnectMiddleware(config);
    console.log("%c 🍇 middleware", "color:#ed9ec7", connectMiddleware.middleware);
    app.use(connectMiddleware.middleware);
    app.get('/', (req, res) => {
        fs.readFile(path.join(staticDir, 'index.html'), (_err, content) => {
            res.end(content);
        });
    });

    app.use(Express.static(staticDir));
    server.listen(3001);
}

i try to log metro code on node_modules;
node_modules/metro/src/Bundler.js

async getDependencyGraph() {
    console.log("%c 🌮 _depGraphPromise", "color:#6ec1c2", this._depGraphPromise);
    return await this._depGraphPromise.catch(err=> console.err(err)).finally(() => {
      console.log("%c 🎂 _depGraphPromise", "color:#fca650", this._depGraphPromise);
    });
 }

but this._depGraphPromise never resolve

the result is i try to use http url to fetch bundle file always loading

[robhogan]

Hi @alexxxcs1, I'm not sure what could be going wrong here - there are a lot of conflating factors, like you're using a custom transformer that you haven't shared the code for, and it's not clear how you're running this (TypeScript?) or against what Metro version.

If you can get this down to a minimal reproduction (ideally a GitHub repo with a project I can clone, yarn install and run), or if you can pin down a Metro bug, please reopen and I'd be happy to try to help.

[alexxxcs1]

@robhogan thanks for help, i finally find the problem is i start the node script with '--inpect' like 'node --loader ts-node/esm --inspect=9999 ./app.ts', if you cant reproduce the issue , i will upload a project to GitHub repo for you.

[alexxxcs1]

if use script 'ts-node ./app.ts' or 'node ./app.js' has no problem , it fix but i dont know why

[alexxxcs1]

@robhogan i create a repo for this issue , try this project https://github.com/alexxxcs1/reproduce-metro-server-issue.
the start script is no problem , and the start:error will start a http server ,run and try to visit localhost:3001/page.bundle you will find out metro middleware never response

[robhogan]

Hi @alexxxcs1 - thanks for the repro. This looks like a Node issue between experimental loaders and child_process, which prevents jest-worker from initialising properly (Metro uses worker processes to process crawled files).

Experimental loaders aren't something we support, but FYI, this issue looks to be fixed (works for me) in Node 16+.