metro.config.web.js

const config = require('./metro.config.js');
const fs = require('fs');
const path = require('path');
const exclusionList = require('metro-config/src/defaults/exclusionList');

const rnPath = fs.realpathSync(
  path.resolve(require.resolve('react-native/package.json'), '..'),
);

const assetRegistryPath = fs.realpathSync(
  path.resolve(
    require.resolve('react-native-web/dist/modules/AssetRegistry/index.js'),
    '..',
  ),
);

module.exports = {
  ...config,
  transformer: {
    ...config.transformer,
    assetRegistryPath,
  },
  resolver: {
    ...config.resolver,
    platforms: ['android', 'ios', 'native', 'web'],
    extraNodeModules: new Proxy(
      {},
      {
        get: (target, name) => {
          if (name === 'react-native') {
            return path.join(__dirname, `node_modules/${name}-web`);
          }
          return path.join(__dirname, `node_modules/${name}`);
        },
      },
    ),
    blockList: exclusionList([
      new RegExp(
        `${(path.resolve(rnPath) + path.sep).replace(/[/\\\\]/g, '[/\\\\]')}.*`,
      ),
      new RegExp(
        `${path.resolve(__dirname, 'web').replace(/[/\\\\]/g, '[/\\\\]')}.*`,
      ),
    ]),
  },
};