React-native-gifted-chat: Gifted-messenger on web

[reformer]

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.

[FaridSafi]

Hello,
I think you can't use react-web for porting it to web. You better have to start from scratch and to follow the same API/props names/etc.
Also I suggest you to wait the v0.2.x release because a lot of things will change https://github.com/FaridSafi/react-native-gifted-messenger/tree/v0.2.x/GiftedMessengerExample

[reformer]

@FaridSafi Thank you for reply :) . So i'm thinking use react-native-for-web (link1 link2). Is it work for me?

[sibelius]

I think is better to start from scratch instead of using react-native-web

[reformer]

Hi,
Finally i can able to port Gifted Messanger on Web. Have a look at out put.,
http://i.stack.imgur.com/ob1jE.png

[FaridSafi]

good job, do you have a public repository?

[sheerun]

@reformer Also interested in web version

[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.

[acomito]

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

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

[dcworldwide]

Nice! I'll work from that