Compile error: Import errors of GiftedChat on React Native Web

[mebsimmons]

Issue Description

Hi, I'm facing the following errors when I try to import GiftedChat but couldn't find any related topics and issues.
Please let me know if you have any ideas or questions for more information. Thank you!

Steps to Reproduce / Code Snippets

1. package.json

    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-native-gifted-chat": "^2.6.4",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-web": "^0.19.13",
    "typescript": "^4.9.5",

2. config-overrides.js (as I'm using react-app-rewired)

module.exports = function override(config) {
  config.resolve.alias = {
    ...(config.resolve.alias || {}),
    "react-native$": "react-native-web", // Alias react-native to react-native-web
  };

  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;
};

3. /pages/Chat.tsx (this is the example code of documentation)

import React, { useState, useCallback, useEffect } from "react";
import { GiftedChat, IMessage } from "react-native-gifted-chat";

function Chat() {
  const [messages, setMessages] = useState<IMessage[]>([]);

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: "Hello developer",
        createdAt: new Date(),
        user: {
          _id: 2,
          name: "React Native",
          avatar: "https://placeimg.com/140/140/any",
        },
      },
    ]);
  }, []);

  const onSend = useCallback((messages: IMessage[] = []) => {
    setMessages((previousMessages) =>
      GiftedChat.append(previousMessages, messages),
    );
  }, []);

  return (
    <GiftedChat
      messages={messages}
      onSend={(messages) => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
  );
}

export default Chat;

Followings are what I'm seeing on the terminal after running the app.

Failed to compile.

Attempted import error: 'GiftedChat' is not exported from 'react-native-gifted-chat' (imported as 'GiftedChat').
ERROR in ./src/pages/Chat.tsx 24:36-53
export 'GiftedChat' (imported as 'GiftedChat') was not found in 'react-native-gifted-chat' (module has no exports)

ERROR in ./src/pages/Chat.tsx 26:30-40
export 'GiftedChat' (imported as 'GiftedChat') was not found in 'react-native-gifted-chat' (module has no exports)

ERROR in ./node_modules/react-native-gifted-chat/lib/index.js 1:0-40
Module not found: Error: Can't resolve 'react-native-get-random-values' in '/home/runner/replit-prototypes/ct-156-d-002/node_modules/react-native-gifted-chat/lib'

ERROR in ./node_modules/react-native-gifted-chat/lib/index.js 2:0-29
Module not found: Error: Can't resolve './GiftedChat' in '/home/runner/replit-prototypes/ct-156-d-002/node_modules/react-native-gifted-chat/lib'
Did you mean 'GiftedChat.js'?
BREAKING CHANGE: The request './GiftedChat' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-native-gifted-chat/lib/index.js 3:0-27
Module not found: Error: Can't resolve './Constant' in '/home/runner/replit-prototypes/ct-156-d-002/node_modules/react-native-gifted-chat/lib'
Did you mean 'Constant.js'?
BREAKING CHANGE: The request './Constant' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-native-gifted-chat/lib/index.js 4:0-24
Module not found: Error: Can't resolve './utils' in '/home/runner/replit-prototypes/ct-156-d-002/node_modules/react-native-gifted-chat/lib'
Did you mean 'utils.js'?
BREAKING CHANGE: The request './utils' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-native-gifted-chat/lib/index.js 5:0-36
Module not found: Error: Can't resolve './GiftedChatContext' in '/home/runner/replit-prototypes/ct-156-d-002/node_modules/react-native-gifted-chat/lib'
Did you mean 'GiftedChatContext.js'?
BREAKING CHANGE: The request './GiftedChatContext' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

webpack compiled with 7 errors
No issues found.

Expected Results

No compile issues

Additional Information

• Nodejs version: v20.16.0
• React version: 18.3.1
• React Native version: not installed
• react-native-gifted-chat version: 2.6.4
• Platform(s) (iOS, Android, or both?): web
• TypeScript version: 4.9.5