React-native-gesture-handler: Please help. Build crash.

[pturchik]

I created a new project using react-native init. After that I added react-native-tab-view package which requires react-native-gesture-handler and created component Tabs.js.

Also I changed babel.config.js to use different configurations for development and production environments.

When I run ./gradlew assembleRelease , I get the error

error SyntaxError: /Users/pavelturchik/work/test/node_modules/react-native-gesture-handler/Swipeable.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (14:8):

  12 | const DRAG_TOSS = 0.05;
  13 |
SyntaxError: /Users/pavelturchik/work/test/node_modules/react-native-gesture-handler/Swipeable.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (14:8):
> 14 | export type PropType = {

     |        ^
  15 |   children: any,
  16 |   friction: number,
  12 | const DRAG_TOSS = 0.05;
  17 |   leftThreshold?: number,
  13 |

> 14 | export type PropType = {
Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation. Run CLI with --verbose flag for more details.
     |        ^
  15 |   children: any,
  16 |   friction: number,
  17 |   leftThreshold?: number,

Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.
    at Parser.raise (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:6930:17)
    at Parser.expectPlugin (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:8328:18)
    at Parser.maybeParseExportDefaultSpecifier (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:11706:12)
    at Parser.parseExport (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:11658:29)
    at Parser.parseStatementContent (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:10715:27)
    at Parser.parseStatement (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:10611:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:11187:25)
    at Parser.parseBlockBody (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:11174:10)
    at Parser.parseTopLevel (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:10542:10)
    at Parser.parse (/Users/pavelturchik/work/test/node_modules/@babel/parser/lib/index.js:12051:10)

If I add @babel/plugin-proposal-export-default-from - nothing will change. Error remains.

For default babel.config.js - all good.

Example project: https://github.com/pturchik/react-native-test.

Can anybody help me what I am doing wrong. I will need different configurations in future for development and production.

[dantenol]

Any updates?

[ananth-minions]

@pturchik have you solved this?

[pturchik]

@lakshmajim give me example of your babel.config.js

[pturchik]

by some reason BABEL_ENV set to "undefined" string (I don't know which package broke this)
you can use this fix

const { BABEL_ENV, NODE_ENV } = process.env
const env = (BABEL_ENV !== 'undefined' && BABEL_ENV) || NODE_ENV

and then using env return right config

[ananth-minions]

@pturchik Thank you for reply,

The issue was resolved using two separate files for web and mobile (ref: platform specific code guidelines )

I have moved rn specific code to .native.js and web specific code to .js files

[Manishalexin]

When trying to import from RNGH in react native web project, it throws with this error,
"Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled", adding babel plugins for these doesn't help.
@lakshmajim & @pturchik how did you solve this?

Minimum reproducible demo,
https://codesandbox.io/s/polished-paper-tdmyp

[ananth-minions]

@Manishalexin Myself tried to use babel plugin. but nothing worked.

And the reason for the issue in my application is using react-navigationwith the web project. So I have created two separate files (.native.jsand.js`) to do navigation in my code for react-native and react.js.

The .native.js file contains and used the navigation-related stuff from react-navigation library and
.js the file contains react-router related stuff.

[pturchik]

When trying to import from RNGH in react native web project, it throws with this error,
"Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled", adding babel plugins for these doesn't help.
@lakshmajim & @pturchik how did you solve this?

Minimum reproducible demo,
https://codesandbox.io/s/polished-paper-tdmyp

I don't see your babel.config.js in demo

[Manishalexin]

@pturchik I had added it locally to test, doesn't help. Check here, https://codesandbox.io/s/runtime-framework-wf4fp?file=/babel.config.js

[pturchik]

@Manishalexin Why you don't use metro-react-native-babel-preset ? Also where you metro.config.js?