react native web with webpack configuration

[Updated]webpack.config.js

// web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.(ts|tsx|js)?$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    path.resolve(appDirectory, 'node_modules/react-native-sdk'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'react-native' preset is recommended to match React Native's packager
      // presets: ['module:metro-react-native-babel-preset'],
      // presets: ['react-native'],
      // presets: [require.resolve('babel-preset-react-native')],
      // Re-write paths to import only the modules needed by the app
      // plugins: ['react-native-web',],
      presets: ['react-native'],
      // presets: ['module:metro-react-native-babel-preset'],
      // plugins: [
      //   // needed to support async/await
      //   '@babel/plugin-transform-runtime'
      // ]
    },
  }
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]'
    }
  }
};

module.exports = {
  entry: [
    // load any web API polyfills
    // path.resolve(appDirectory, 'polyfills-web.js'),
    // your web-specific entry file
    path.resolve(appDirectory, 'index.js')
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native$': 'react-native-web'
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js']
  }
}

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
const path = require('path');
// const blacklist = require('metro').createBlacklist;
const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
    /**
     * Add "global" dependencies for our RN project here so that our local components can resolve their
   * dependencies correctly
   */
  resolver: {
    extraNodeModules: {
      "react-native-sdk": path.resolve(__dirname, "node_modules/react-native-sdk")
    },
    blacklistRE: blacklist([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
      /nodejs-assets\/.*/,
      /android\/.*/,
      /ios\/.*/
    ])
  },
 /**
   * Add our workspace roots so that react native can find the source code for the included packages
   * in the monorepo
   */
  projectRoot: path.resolve(__dirname),
  watchFolders: [
    path.resolve(__dirname, "node_modules/react-native-sdk"),
  ]
};

package.json

{
  "name": "reactNativeSample",
  "version": "1.4.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",    
    "build": "./node_modules/.bin/webpack-cli --config ./web/webpack.config.js",
    "clear_jest": "jest --clearCache",
    "tsc": "tsc"
  },
  "dependencies": {
    "babel-plugin-react-native-web": "^0.11.4",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-native": "0.58.0",
    "react-native-sdk": "file:..",
    "react-native-simple-toast": "0.0.8",
    "react-native-web": "^0.10.0-alpha.3",
    "url-loader": "^1.1.2",
    "webpack": "^4.32.2",
    "webpack-dev-server": "^3.4.1"
  },
  "devDependencies": {
    "@types/enzyme": "^3.1.18",
    "@types/enzyme-adapter-react-16": "^1.0.4",
    "@types/react": "^16.8.3",
    "@types/react-native": "^0.57.36",
    "@types/react-test-renderer": "16.8.1",
    "describe": "^1.2.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "expect": "^24.5.0",
    "it": "^1.1.1",
    "jest-fetch-mock": "^2.1.0",
    "jsdom": "14.0.0",
    "jsdom-global": "3.0.2",
    "react-native-typescript-transformer": "^1.2.11",
    "ts-jest": "^23.10.5",
    "typescript": "^3.3.3",
    "babel-plugin-react-native-web": "^0.9.13",
    "babel-preset-react-native": "^5.0.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-loader": "^8.0.5",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3",
    "url-loader": "^1.1.2",
    "webpack-cli": "^3.2.1",
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
      "\\.(ts|tsx)$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.jest.json",
        "diagnostics": {
          "pathRegex": "\\.(spec|test)\\.ts$",
          "warnOnly": true,
          "ignoreCodes": [
            2571,
            6031,
            18003,
            "TS2322"
          ]
        }
      }
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "node"
    ],
    "modulePaths": [
      "<rootDir>"
    ],
    "setupFiles": [
      "./tests/setup.js"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

I tried to install these files to build a bundle for the web from a react-native project, I found your package.json to have a comma after [..]"3.2.1"[..] which bothers npm for its non-JSON format, even when fixed, there seem to be dependency conflicts between the modules

I tried to install these files to build a bundle for the web from a react-native project, I found your package.json to have a comma after [..]"3.2.1"[..] which bothers npm for its non-JSON format, even when fixed, there seem to be dependency conflicts between the modules

Hello, can you please tell me what are the conflicts? I am trying to use this on React Native for mobile as a replacement for Metro bundler.