Web build fails with next.js

[pcpuwu]

Issue Description

I am trying to use react-native gifted-chat along with next.js but having tried various methods the build is still failing.

Steps to Reproduce / Code Snippets

• I followed the guide for web given in the github readme and put the config in next.config.js which should have provided that additional config to next.js.

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.js$/,
    exclude: /node_modules[/\\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text)/,
    use: {
      loader: 'babel-loader',
      options: {
        babelrc: false,
        configFile: false,
        presets: [
          ['@babel/preset-env', { useBuiltIns: 'usage' }],
          '@babel/preset-react',
        ],
        plugins: ['@babel/plugin-proposal-class-properties'],
      },
    },
  })

  return config
}

• Then I tried web example and modify it for next.js Github Link

• Then I tried to build the web example Github Link which also is failing right now.

• Then I tried react native web example next.js example coupled with the configuration given in the readme.

• Tried this solution to transpile all the modules given in the web configuration in the readme using this stackoverflow solution

• Finally I tried using next-transpile-modules library to specify all the modules that require transpiling directly as parameters to the library, it worked till I had to transpile react-native-typing-animation which was giving the transpile error of webpack loader required to use the given library. This solution did transpile react-native-gifted-chat, react-native-lightbox, react-native-parsed-text without giving webpack loader error.

Expected Results

React native web works as per this example along with next.js

Additional Information

• "expo-av": "^11.2.3",
• "next": "12.2.0",
• "nextjs-cors": "^2.1.1",
• "react": "18.2.0",
• "react-dom": "18.2.0",
• "react-native-gifted-chat": "^1.0.2",
• "react-native-lightbox-v2": "^0.9.0",
• "react-native-parsed-text": "^0.0.22",
• "react-native-typing-animation": "^0.1.7",
• "react-native-web": "^0.18.2",
• "next-transpile-modules": "^9.0.0",
• "typescript": "4.7.4"
• Nodejs version: v16.15.1 LTS

Main Error

error - ./node_modules/.pnpm/[email protected][email protected]/node_modules/react-native-gifted-chat/lib/GiftedChat.js
Module parse failed: Unexpected token (356: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,

[Eigilak]

Have same issue :( With same exact same setup

[Matrixhoss]

I have a similar issue

[chrisedington]

Did anyone manage to get past this issue?

[sourabhLX]

any updates any one 🙌

[mikehuebner]

If anyone still struggling, in your next.config.js under transpilePackages

transpilePackages: [
      '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-lightbox-v2',
    ],

[shneeki]

If anyone still struggling, in your next.config.js under transpilePackages

transpilePackages: [
      '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-lightbox-v2',
    ],

Only this and nothing else? I tried changing transpilePackages only and it doesn't work