I had this error only with Drawer Navigation in Web.
Compiled with problems:X
ERROR in ./node_modules/react-native-reanimated/lib/createAnimatedComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\react-native-reanimated\lib\createAnimatedComponent.js: Support for the experimental syntax 'jsx' isn't currently enabled (448:9):
446 | });
447 | return (
> 448 | <Component {...props} ref={this._setComponentRef} {...platformProps} />
| ^
449 | );
450 | }
451 | }
Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:569:17)
at Parser.raiseWithData (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:562:17)
at Parser.expectOnePlugin (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:3626:18)
at Parser.parseExprAtom (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:12055:18)
at Parser.parseExprSubscripts (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11654:23)
at Parser.parseUpdate (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11634:21)
at Parser.parseMaybeUnary (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11609:23)
at Parser.parseMaybeUnaryOrPrivate (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11421:61)
at Parser.parseExprOps (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11428:23)
at Parser.parseMaybeConditional (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11398:23)
ERROR in ./node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\react-native-reanimated\lib\reanimated1\Transitioning.js: Support for the experimental syntax 'jsx' isn't currently enabled (36:7):
34 | return (props) => {
35 | return (
> 36 | <TransitioningContext.Consumer>
| ^
37 | {(context) => <Comp context={context} {...props} />}
38 | </TransitioningContext.Consumer>
39 | );
Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:569:17)
at Parser.raiseWithData (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:562:17)
at Parser.expectOnePlugin (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:3626:18)
at Parser.parseExprAtom (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:12055:18)
at Parser.parseExprSubscripts (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11654:23)
at Parser.parseUpdate (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11634:21)
at Parser.parseMaybeUnary (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11609:23)
at Parser.parseMaybeUnaryOrPrivate (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11421:61)
at Parser.parseExprOps (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11428:23)
at Parser.parseMaybeConditional (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11398:23)
ERROR in ./node_modules/react-native-screens/src/screens.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\react-native-screens\src\screens.web.js: Support for the experimental syntax 'jsx' isn't currently enabled (105:12):
103 |
104 | render() {
> 105 | return <Animated.View {...this.props} ref={this._setRef} />;
| ^
106 | }
107 | }
108 |
Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:569:17)
at Parser.raiseWithData (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:562:17)
at Parser.expectOnePlugin (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:3626:18)
at Parser.parseExprAtom (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:12055:18)
at Parser.parseExprSubscripts (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11654:23)
at Parser.parseUpdate (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11634:21)
at Parser.parseMaybeUnary (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11609:23)
at Parser.parseMaybeUnaryOrPrivate (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11421:61)
at Parser.parseExprOps (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11428:23)
at Parser.parseMaybeConditional (C:\Users\weve\Documents\Projetos\ReactNative\Linguis\node_modules\@babel\parser\lib\index.js:11398:23)
Well I created a simple class and include my Drawer navigation (Note this issues happened only with drawer, because with @react-navigation/native-stack this is works)
Rn.tsx
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import Message from "./Message.web";
import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Message" component={Message} />
</Drawer.Navigator>
);
}
function Rn() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
export default Rn;
I call this in App.js
import 'react-native-gesture-handler';
enableScreens();
import React from 'react';
import {enableScreens} from 'react-native-screens';
import RouteWeb from './components/web/Rn';
import RouteNative from './components/native/Route.native';
import { Platform} from "react-native";
const App = () => {
return Platform.OS == "web" ? <RouteWeb/> : <RouteNative />
};
export default App;
Message.tsx
import React from "react";
import { View, Text } from "react-native";
const Message = () => {
return (
<View>
<Text>Message Web</Text>
</View>
);
};
export default Message;
My dependences in package.json
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"babel-preset-react-native": "^2.1.0",
"i": "^0.3.7",
"npm": "^8.3.0",
"react": "17.0.2",
"react-dom": "^17.0.2",
"react-native": "^0.64.2",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^1.0.0-alpha.23",
"react-native-web": "^0.17.1",
"react-native-webview": "^11.15.0",
"react-navigation": "^4.4.4",
"react-responsive": "^9.0.0-beta.5"
}
babel.config.js
module.exports = {
presets: ["@babel/preset-react"],
//I tried to use this plugins below but doesn't work
// plugins: ["@babel/plugin-syntax-jsx", "react-native-reanimated/plugin"]
}
According to error I tried to include @babel/preset-react and after @babel/plugin-syntax-jsx in babel.config.js and didn't work.
I appreciate if someone can help me.
