-
-
Notifications
You must be signed in to change notification settings - Fork 972
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DrawerLayout.js: Support for the experimental syntax 'flow' isn't currently enabled #1076
Comments
same issue I have Hybrid app native and web with typescript none of those not working looks like a deep conflict between type script and flow it's my babel config
maybe with using @babel/plugin-transform-flow-strip-types instead on 'react-native-gesture-handler' and a clean build our problem will resolve same issue Please help. Build crash. #840 |
same here. Is there any workaround? |
Using this webpack.config.js i managed to remove the error but i'm getting another one 🤔
Dont forget to install both plugins :
New Error 👍
Any help would be greatly appreciated |
@chichke // Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
['module:metro-react-native-babel-preset'], // Add this line,
[
require.resolve('babel-preset-react-app/dependencies'),
{helpers: true},
],
],
cacheDirectory: true,
plugins: [
["@babel/plugin-transform-flow-strip-types"],
["@babel/plugin-proposal-class-properties"]
[
'module-resolver',
{
alias: {
'^react-native$': 'react-native-web',
},
},
],
],
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap,
},
},``` |
Hitting same issue. Same as others, using RN in a hybrid app with React Native Web. |
This looks like the result of not transpiling your When creating a cross platform This is because However So when targeting the web you need to make sure that you:
If you used
So something like this:
If this is a new error and your webpack config was working previously it's also possible that your loader test regexes are not being hit correctly so you might want to take a look at those. |
@chichke @doongsilee thanks! Removed the RNGH from the webpack exclude list for babel loader, it worked with react and flow babel presets. |
Still experiencing this as well, @abhisingh03 could explain a little more what u did to fix it? |
In some how expo web build fix that! Use expo |
Basically to target web, you need to update your webpack config to add 'loaders' to transpile all your react-native dependencies through whichever babel preset contains all the plugins you need.
|
I can confirm that the @doongsilee it's working nano ./node_modules/react-scripts/config/webpack.config.js Is any ideas for making this customization without changing the webpack inside the node_modules? |
I've posted a very detailed answer for this and related issues here (its the accepted answer): |
## Description This PR combines three others (#1273, #1280, #1291) and rewrites Gesture Handler and examples to TS. We tried to make non-breaking changes but this should be tested. Most types were overhauled, although they should remain compatible with old ones thanks to the type aliases in the `src/handlers/gestureHandlerTypesCompat.ts` file. CI for iOS was disabled due to strange fails. It should be reenabled when we add unit/e2e tests to RNGH. Fixes #1076 - removed Flow from DrawerLayout Fixes #1261 - added TS types Fixes #998 - regenerated example app Fixes #887 - removed prop types ## Changes ### Package packing, configs & source code - Swipeable and DrawerLayout are now resolved by their own `package.json`s - React Native uses source code directly, browser and TS use files from `dist/` - Removed prop types #### Internal - Removed unused babel config in the root dir, adjust Eslint config - Removed unused functions - Changed private names from `_name` to `private name` - Replaced `x && x()` syntax with `x.?()` ### Types - Added types compatibility layer for the new types (`gestureHandlerTypesCompat.ts`) - Added generation of declarations and declarations map when TS is transpiled - Moved types from declaration files to files with implementation - Added types to Android / iOS / shared JS code - Added basic types to the web version ### Example app - Removed unused bits in examples - Regenerated Example app with latest RN - Removed stray files from examples/ - Updated Travis config to include newer Android build tools & iOS scheme name change - Organized Example code structure - Removed Example tests (they weren't testing anything) - Reconfigured web version of examples ## Testing PRs that were merged into `ts-rewrite` branch were tested by using `npm pack` and adding it to the new app. In the case of #1273 & #1280, we additionally checked bundled diff for changes. We diffed master to generated dist/ directory using `diff --color -wryN -W 200 src/ dist/src`with imports removed by `find src -name "*.js" -type f -exec sed -i '' '/import/d' {} \;` Co-authored-by: WoLewicki <wojciech.lewicki@swmansion.com> Co-authored-by: Jakub <jakub.gonet@swmansion.com>
This PR combines three others (software-mansion#1273, software-mansion#1280, software-mansion#1291) and rewrites Gesture Handler and examples to TS. We tried to make non-breaking changes but this should be tested. Most types were overhauled, although they should remain compatible with old ones thanks to the type aliases in the `src/handlers/gestureHandlerTypesCompat.ts` file. CI for iOS was disabled due to strange fails. It should be reenabled when we add unit/e2e tests to RNGH. Fixes software-mansion#1076 - removed Flow from DrawerLayout Fixes software-mansion#1261 - added TS types Fixes software-mansion#998 - regenerated example app Fixes software-mansion#887 - removed prop types - Swipeable and DrawerLayout are now resolved by their own `package.json`s - React Native uses source code directly, browser and TS use files from `dist/` - Removed prop types - Removed unused babel config in the root dir, adjust Eslint config - Removed unused functions - Changed private names from `_name` to `private name` - Replaced `x && x()` syntax with `x.?()` - Added types compatibility layer for the new types (`gestureHandlerTypesCompat.ts`) - Added generation of declarations and declarations map when TS is transpiled - Moved types from declaration files to files with implementation - Added types to Android / iOS / shared JS code - Added basic types to the web version - Removed unused bits in examples - Regenerated Example app with latest RN - Removed stray files from examples/ - Updated Travis config to include newer Android build tools & iOS scheme name change - Organized Example code structure - Removed Example tests (they weren't testing anything) - Reconfigured web version of examples PRs that were merged into `ts-rewrite` branch were tested by using `npm pack` and adding it to the new app. In the case of software-mansion#1273 & software-mansion#1280, we additionally checked bundled diff for changes. We diffed master to generated dist/ directory using `diff --color -wryN -W 200 src/ dist/src`with imports removed by `find src -name "*.js" -type f -exec sed -i '' '/import/d' {} \;` Co-authored-by: WoLewicki <wojciech.lewicki@swmansion.com> Co-authored-by: Jakub <jakub.gonet@swmansion.com>
Can you clarify exactly how to add this into presets under test: ? |
## Description This PR combines three others (software-mansion#1273, software-mansion#1280, software-mansion#1291) and rewrites Gesture Handler and examples to TS. We tried to make non-breaking changes but this should be tested. Most types were overhauled, although they should remain compatible with old ones thanks to the type aliases in the `src/handlers/gestureHandlerTypesCompat.ts` file. CI for iOS was disabled due to strange fails. It should be reenabled when we add unit/e2e tests to RNGH. Fixes software-mansion#1076 - removed Flow from DrawerLayout Fixes software-mansion#1261 - added TS types Fixes software-mansion#998 - regenerated example app Fixes software-mansion#887 - removed prop types ## Changes ### Package packing, configs & source code - Swipeable and DrawerLayout are now resolved by their own `package.json`s - React Native uses source code directly, browser and TS use files from `dist/` - Removed prop types #### Internal - Removed unused babel config in the root dir, adjust Eslint config - Removed unused functions - Changed private names from `_name` to `private name` - Replaced `x && x()` syntax with `x.?()` ### Types - Added types compatibility layer for the new types (`gestureHandlerTypesCompat.ts`) - Added generation of declarations and declarations map when TS is transpiled - Moved types from declaration files to files with implementation - Added types to Android / iOS / shared JS code - Added basic types to the web version ### Example app - Removed unused bits in examples - Regenerated Example app with latest RN - Removed stray files from examples/ - Updated Travis config to include newer Android build tools & iOS scheme name change - Organized Example code structure - Removed Example tests (they weren't testing anything) - Reconfigured web version of examples ## Testing PRs that were merged into `ts-rewrite` branch were tested by using `npm pack` and adding it to the new app. In the case of software-mansion#1273 & software-mansion#1280, we additionally checked bundled diff for changes. We diffed master to generated dist/ directory using `diff --color -wryN -W 200 src/ dist/src`with imports removed by `find src -name "*.js" -type f -exec sed -i '' '/import/d' {} \;` Co-authored-by: WoLewicki <wojciech.lewicki@swmansion.com> Co-authored-by: Jakub <jakub.gonet@swmansion.com>
SyntaxError: /Users/jacquesludik/CortexCoachWeb/node_modules/react-native-gesture-handler/DrawerLayout.js: Support for the experimental syntax 'flow' isn't currently enabled (30:8):
28 | const SETTLING = 'Settling';
29 |
Add @babel/preset-flow (https://git.io/JfeDn) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-flow (https://git.io/vb4yb) to the 'plugins' section to enable parsing.
The text was updated successfully, but these errors were encountered: