React-native-gifted-chat: NextJS configuration

[hbeckeri]

Issue Description

Im having trouble with my configuration to build react-native-gifted-chat on web using nextjs. Does anyone know how to configure next.config.js or .babelrc to build this?

Here are my current config

.bablerc

{
  "presets": [
    ["@babel/preset-env", { "useBuiltIns": "usage" }],
    "@babel/preset-react",
    "next/babel"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    [
      "inline-dotenv",
      {
        "path": "./.env"
      }
    ]
  ]
}

I get the following error when building

[ wait ]  compiling ...
[ error ] ./node_modules/react-native-gifted-chat/lib/GiftedChat.js 337:26
Module parse failed: Unexpected token (337:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     renderMessages() {
|         const { messagesContainerStyle, ...messagesContainerProps } = this.props;
>         const fragment = (<View style={[
|             {
|                 height: this.state.messagesContainerHeight,
/node_modules/react-native-gifted-chat/lib/index.js:1
(function (exports, require, module, __filename, __dirname) { export * from './GiftedChat';
                                                              ^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:656:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.react-native-gifted-chat...

[rsoury]

Hey team, solved this.

You want to:

1. Add react-native, react-native-web, and react-native-gifted-chat as dependencies, and babel-plugin-react-native-web as a dev dependency
2. Use this example to integrate react-native-web into your Next.js project.
   The required steps here are:
   
   
   
   • the babel plugin ["react-native-web", { commonjs: true }]
   
   
   • the Webpack alias config.resolve.alias = {...config.resolve.alias, "react-native$": "react-native-web"}. For next webpack config
   
   
   • wrapping your GiftedChat component in a React Native View component. See here
   
   
3. Use next-transpile-modules to transpile your react-native dependencies. Inside your Nextjs Config next.config.js, your import should look like:

const withTM = require("next-transpile-modules")([
    "react-native-gifted-chat",
    "react-native-lightbox",
    "react-native-parsed-text",
    "react-native-typing-animation",
    "react-native-communications",
    "react-native-iphone-x-helper",
    "@expo/react-native-action-sheet",
    "react-native"
]);

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Raphaelinyang]

how will i handle this in ReactJs