react-native-gifted-chat
react-native-gifted-chat copied to clipboard
FaridSafi
I can't run v2 on web
Issue Description
When I try to run the web example code with the new version and updated react version I got this error
Steps to Reproduce / Code Snippets
yarn start
Expected Results
ERROR in ./node_modules/react-native-gifted-chat/lib/InputToolbar.js 1:0-45 Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/react-native-gifted-chat/lib' ERROR in ./node_modules/react-native-gifted-chat/lib/QuickReplies.js 1:0-45 Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/react-native-gifted-chat/lib' ERROR in ./node_modules/react-native-lightbox-v2/dist/Lightbox.js 1:0-45 Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/react-native-lightbox-v2/dist' ERROR in ./node_modules/react-native-lightbox-v2/dist/LightboxOverlay.js 15:0-45 Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/react-native-lightbox-v2/dist' ERROR in ./node_modules/@expo/react-native-action-sheet/lib/module/ActionSheet/CustomActionSheet.js 108:6-34 export 'BackHandler' (imported as 'BackHandler') was not found in 'react-native' (possible exports: AccessibilityInfo, ActivityIndicator, Alert, Animated, AppRegistry, AppState, Appearance, Button, CheckBox, Clipboard, DeviceEventEmitter, Dimensions, Easing, FlatList, I18nManager, Image, ImageBackground, InteractionManager, Keyboard, KeyboardAvoidingView, LayoutAnimation, Linking, LogBox, Modal, NativeEventEmitter, NativeModules, PanResponder, Picker, PixelRatio, Platform, Pressable, ProgressBar, RefreshControl, SafeAreaView, ScrollView, SectionList, Share, StatusBar, StyleSheet, Switch, Text, TextInput, Touchable, TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback, UIManager, Vibration, View, VirtualizedList, YellowBox, findNodeHandle, processColor, render, unmountComponentAtNode, unstable_createElement, useColorScheme, useLocaleContext, useWindowDimensions) ERROR in ./node_modules/@expo/react-native-action-sheet/lib/module/ActionSheet/CustomActionSheet.js 145:6-37 export 'BackHandler' (imported as 'BackHandler') was not found in 'react-native' (possible exports: AccessibilityInfo, ActivityIndicator, Alert, Animated, AppRegistry, AppState, Appearance, Button, CheckBox, Clipboard, DeviceEventEmitter, Dimensions, Easing, FlatList, I18nManager, Image, ImageBackground, InteractionManager, Keyboard, KeyboardAvoidingView, LayoutAnimation, Linking, LogBox, Modal, NativeEventEmitter, NativeModules, PanResponder, Picker, PixelRatio, Platform, Pressable, ProgressBar, RefreshControl, SafeAreaView, ScrollView, SectionList, Share, StatusBar, StyleSheet, Switch, Text, TextInput, Touchable, TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback, UIManager, Vibration, View, VirtualizedList, YellowBox, findNodeHandle, processColor, render, unmountComponentAtNode, unstable_createElement, useColorScheme, useLocaleContext, useWindowDimensions) ERROR in ./node_modules/react-native-gifted-chat/node_modules/react-native-typing-animation/src/index.js Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js): SyntaxError: /Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/react-native-gifted-chat/node_modules/react-native-typing-animation/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (37:7):
35 | 36 | return (
37 | <View style={[styles.container, style]}> | ^ 38 | <Dot x={dotX - dotRadius - dotMargin} y={this.state.y1} radius={dotRadius} style={dotStyles} dotColor={dotColor} /> 39 | <Dot x={dotX} y={this.state.y2} radius={dotRadius} style={dotStyles} dotColor={dotColor} /> 40 | <Dot x={dotX + dotRadius + dotMargin} y={this.state.y3} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing. at instantiate (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:653:32) at constructor (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:947:12) at Parser.raise (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:3261:19) at Parser.expectOnePlugin (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:3307:18) at Parser.parseExprAtom (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:11220:18) at Parser.parseExprSubscripts (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10870:23) at Parser.parseUpdate (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10853:21) at Parser.parseMaybeUnary (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10829:23) at Parser.parseMaybeUnaryOrPrivate (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10667:61) at Parser.parseExprOps (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10672:23) at Parser.parseMaybeConditional (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10649:23) at Parser.parseMaybeAssign (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10610:21) at /Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10580:39 at Parser.allowInAnd (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12255:12) at Parser.parseMaybeAssignAllowIn (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10580:17) at Parser.parseParenAndDistinguishExpression (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:11488:28) at Parser.parseExprAtom (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:11139:23) at Parser.parseExprSubscripts (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10870:23) at Parser.parseUpdate (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10853:21) at Parser.parseMaybeUnary (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10829:23) at Parser.parseMaybeUnaryOrPrivate (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10667:61) at Parser.parseExprOps (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10672:23) at Parser.parseMaybeConditional (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10649:23) at Parser.parseMaybeAssign (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10610:21) at Parser.parseExpressionBase (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10564:23) at /Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10560:39 at Parser.allowInAnd (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12250:16) at Parser.parseExpression (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:10560:17) at Parser.parseReturnStatement (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12930:28) at Parser.parseStatementContent (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12577:21) at Parser.parseStatementLike (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12544:17) at Parser.parseStatementListItem (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12524:17) at Parser.parseBlockOrModuleBlockBody (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13116:61) at Parser.parseBlockBody (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13109:10) at Parser.parseBlock (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13097:10) at Parser.parseFunctionBody (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:11922:24) at Parser.parseFunctionBodyAndFinish (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:11908:10) at Parser.parseMethod (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:11866:31) at Parser.pushClassMethod (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13557:30) at Parser.parseClassMemberWithIsStatic (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13429:12) at Parser.parseClassMember (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13373:10) at /Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13323:14 at Parser.withSmartMixTopicForbiddingContext (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12232:14) at Parser.parseClassBody (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13303:10) at Parser.parseClass (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13281:22) at Parser.parseStatementContent (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12573:21) at Parser.parseStatementLike (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12544:17) at Parser.parseModuleItem (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:12521:17) at Parser.parseBlockOrModuleBlockBody (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13116:36) at Parser.parseBlockBody (/Users/hossam/Desktop/Test Work/gifted-chat-web-demo/node_modules/@babel/parser/lib/index.js:13109:10)
Additional Information
- Nodejs version: v16.16.0
- React version: 18.2.0
- React Native version: 0.71.4
- react-native-gifted-chat version: 2.0.1
- Platform(s) (iOS, Android, or both?): Web
- TypeScript version: 5.0.2
Hello I think it is related to this. Having the same issue.
https://github.com/necolas/react-native-web/releases/tag/0.19.0
They removed the BackHandler from the code.
Using this version works for me.
"react-native-web": "^0.18.12",
@agusvazquez Thank you it solves the BackHandler problem but the JSX problem still exist
Compiled with problems:X
ERROR in ./node_modules/react-native-gifted-chat/lib/GiftedChat.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/react-native-gifted-chat/lib/GiftedChat.js: Support for the experimental syntax 'jsx' isn't currently enabled (352:27):
350 | renderMessages() {
351 | const { messagesContainerStyle, ...messagesContainerProps } = this.props;
> 352 | const fragment = (<View style={[
| ^
353 | {
354 | height: this.state.messagesContainerHeight,
355 | },
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
at instantiate (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:72:32)
at constructor (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:359:12)
at Parser.raise (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3339:19)
at Parser.expectOnePlugin (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3396:18)
at Parser.parseExprAtom (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:13078:18)
at Parser.parseExprSubscripts (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12648:23)
at Parser.parseUpdate (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12627:21)
at Parser.parseMaybeUnary (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12598:23)
at Parser.parseMaybeUnaryOrPrivate (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12392:61)
at Parser.parseExprOps (/Users/hossam/Desktop/Test Work/YDS/cerebro-tech-doctor/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12399:23)
and this is my config-overwrite.js file
const path = require("path");
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|expo-av)/,
use: {
loader: "babel-loader",
options: {
babelrc: true,
configFile: false,
presets: [
["@babel/preset-env", { useBuiltIns: "usage" }],
"@babel/preset-react",
"@babel/react",
],
plugins: [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-jsx",
],
},
},
});
return config;
};
module.exports = function override(config, env) {
config.resolve.alias = Object.assign({}, config.resolve.alias, {
"core-js/modules/web.dom.iterable": path.resolve(
__dirname,
"node_modules/core-js/modules/es.array.iterator.js"
),
});
return config;
};
Also getting this issue.
ERROR in ./node_modules/react-native-lightbox-v2/dist/Lightbox.js 63:12
Module parse failed: Unexpected token (63:12)
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
| ...rest,
| });
> return (<View ref={_root} style={style} onLayout={onLayout}>
| <Animated.View style={{ opacity: layoutOpacity.current }}>
| <TouchableHighlight underlayColor={underlayColor} onPress={open} onLongPress={onLongPress} disabled={disabled}>
@ ./node_modules/react-native-gifted-chat/lib/MessageImage.js 1:670-705
@ ./node_modules/react-native-gifted-chat/lib/GiftedChat.js 1:3695-3720
@ ./node_modules/react-native-gifted-chat/lib/index.js 1:73-96
@ ./src/screens/BottomTabNavigator/HomeScreen/StreamChat.web.js 1:1061-1096
@ ./src/screens/ExploreStreamViewScreen/ExploreStreamViewScreen.web.js 1:2057-2111
@ ./src/navigation/Routes.web.js 1:2688-2757
@ ./App.web.js 1:1157-1191
@ ./index.web.js 1:240-260
ERROR in ./node_modules/react-native-parsed-text/src/ParsedText.js 114:8
Module parse failed: Unexpected token (114:8)
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
| const { style, ...remainder } = props;
| return (
> <Text
| key={`parsedText-${index}`}
| style={[parentStyle, style]}
@ ./node_modules/react-native-gifted-chat/lib/MessageText.js 1:693-728
@ ./node_modules/react-native-gifted-chat/lib/GiftedChat.js 1:3738-3762
@ ./node_modules/react-native-gifted-chat/lib/index.js 1:73-96
@ ./src/screens/BottomTabNavigator/HomeScreen/StreamChat.web.js 1:1061-1096
@ ./src/screens/ExploreStreamViewScreen/ExploreStreamViewScreen.web.js 1:2057-2111
@ ./src/navigation/Routes.web.js 1:2688-2757
@ ./App.web.js 1:1157-1191
@ ./index.web.js 1:240-260
ERROR in ./node_modules/react-native-typing-animation/src/index.js 37:6
Module parse failed: Unexpected token (37:6)
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
|
| return (
> <View style={[styles.container, style]}>
| <Dot x={dotX - dotRadius - dotMargin} y={this.state.y1} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
| <Dot x={dotX} y={this.state.y2} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
@ ./node_modules/react-native-typing-animation/index.js 1:0-52 1:0-52
@ ./node_modules/react-native-gifted-chat/lib/TypingIndicator.js 1:427-467
@ ./node_modules/react-native-gifted-chat/lib/MessageContainer.js 1:1672-1700
@ ./node_modules/react-native-gifted-chat/lib/GiftedChat.js 1:3646-3675
@ ./node_modules/react-native-gifted-chat/lib/index.js 1:73-96
@ ./src/screens/BottomTabNavigator/HomeScreen/StreamChat.web.js 1:1061-1096
@ ./src/screens/ExploreStreamViewScreen/ExploreStreamViewScreen.web.js 1:2057-2111
@ ./src/navigation/Routes.web.js 1:2688-2757
@ ./App.web.js 1:1157-1191
@ ./index.web.js 1:240-260
@Matrixhoss did you manage to solve this ? I'm still struggling with it
@chrisedington yes
I first installed those versions "react-native-web": "0.18.12", "react-native": "^0.71.5", "react-native-gifted-chat": "2.0.1", "core-js": "^2.6.5",
and then add this configuration for config-overrides.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|react-native-typing-animation)/,
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;
};
and that works for me
hey, guys, this error is not fixed, I tried with your guide on config-override.js, I could find out this errors.
ERROR React is not defined ReferenceError: React is not defined at ./src/index.js (http://localhost:3000/static/js/bundle.js:91:32) at options.factory (http://localhost:3000/static/js/bundle.js:42227:31) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:41593:33) at http://localhost:3000/static/js/bundle.js:42873:37 at http://localhost:3000/static/js/bundle.js:42875:12
I wish fix this issues. Thanks for your time.
@dragon00114 are you able to resolve it? I am getting the same issue
