Gifted-messenger on web

Hi, I trying to port GiftedMessanger on web, but i stuck in one error that i not able solve after spending so many days. My package…json is

 "dependencies": {
    "react": "0.14.8",
    "react-web": "0.2.4",
    "react-dom": "0.14.7",
    "react-native": "0.23.1",
    "react-art": "0.14.0",
    "socket.io-client": "1.3.7",
    "react-router": "2.4.1",
    "@exponent/react-native-navigator": "0.4.2",
    "react-native-incall-manager": "1.1.0",
    "react-native-extra-dimensions-android": "^0.17.0",
    "react-native-gifted-messenger": "*"
  },
  "devDependencies": {
    "babel-core": "6.9.0",
    "babel-loader": "6.2.4",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "react-hot-loader": "1.3.0",
    "webpack": "1.13.0",
    "webpack-dev-server": "1.14.1",
    "haste-resolver-webpack-plugin": "0.1.2",
    "webpack-html-plugin": "0.1.1",
    "css-loader": "0.23.1",
    "style-loader": "0.13.1",
    "file-loader": "0.8.5"
  }

My web config is,

module.exports = {
  ip: IP,
  port: PORT,
  devtool: 'source-map',
  resolve: {
    alias: {
      'react-native': 'react-web',
      'ReactNativeART': 'react-art',
    },
    extensions: ['', '.js', '.jsx'],
  },
  entry: isProd? [
    config.paths.index
  ]: [
    'webpack-dev-server/client?http://' + IP + ':' + PORT,
    'webpack/hot/only-dev-server',
    config.paths.index,
  ],
  output: {
    path: path.join(__dirname, 'output'),
    filename: 'bundle.js'
  },
  plugins: [
     new HasteResolverPlugin({
      platform: 'web',
      nodeModules: ['react-web']
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development'),
      }
    }),
    isProd? new webpack.ProvidePlugin({
      React: "react"
    }): new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlPlugin(),
  ],
  module: {
    loaders: [
      {
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react'],
      include: [config.paths.src],
      exclude: [/node_modules/]
      },
    { 
      test: /\.css$/, 
      loader: "style-loader!css-loader"
    },
    {
      test: /.*\.(gif|png|jpe?g|svg)$/i,
      loader: 'file-loader'
    }],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  }
};

My implementation for porting, ‘use strict’;

var React = require('react-native');

var { AppRegistry } = React;

AppRegistry.registerComponent(‘PortedOnWeb’, () => require(‘./GiftedMessengerContainer’));

Now my issue while compiling,

[421] ./~/react-web/lib/NativeModules/NativeModules.web.js 170 bytes {0} [built] [422] ./~/react-web/lib/StyleSheet/processColor.web.js 229 bytes {0} [built] [423] ./GiftedMessengerContainer.js 12.2 kB {0} [built] [1 error] [425] ./~/react-hot-loader/makeExportsHot.js 1.69 kB {0} [built] [426] ./~/react-hot-loader/isReactClassish.js 801 bytes {0} [built] [427] ./~/react-hot-loader/isReactElementish.js 288 bytes {0} [built]

RROR in ./~/react-native-gifted-messenger/GiftedMessenger.js odule parse failed: D:\MyDirectory\node_modules\react-native-gifted-messenger\GiftedMessenger.js Unexpected token (398:10) ou may need an appropriate loader to handle this file type. yntaxError: Unexpected token (398:10) at Parser.pp.raise (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13) at Parser.pp.unexpected (D:\MyDirectorySharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8) at Parser.pp.parseExprAtom (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:333:12) at Parser.pp.parseExprSubscripts (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19) at Parser.pp.parseMaybeUnary (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17) at Parser.pp.parseExprOps (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19) at Parser.pp.parseMaybeConditional (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19) at Parser.pp.parseMaybeAssign (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19) at Parser.pp.parseParenAndDistinguishExpression (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:376:28) at Parser.pp.parseExprAtom (D:MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:307:19) at Parser.pp.parseExprSubscripts (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19) at Parser.pp.parseMaybeUnary (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17) at Parser.pp.parseExprOps (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19) at Parser.pp.parseMaybeConditional (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19) at Parser.pp.parseMaybeAssign (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19) at Parser.pp.parseExpression (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:88:19) @ ./GiftedMessengerContainer.js 19:22-62

Please give me hint where i'm wrong. What will be the possible way to resolve it.

[acomito]

@dcworldwide I need this as well. I saw this:

https://github.com/stermedia/react-web-gifted-chat

[dcworldwide]

@reformer @FaridSafi I’m also looking for a web version. Happy to roll my own but would prefer to work with someone else and contribute to their lib. Let me know if anyone took this further.