how to enable exportDefaultFrom?

[nadjsyrb]

react-native-web-monorepo/node_modules/react-native-gesture-handler/DrawerLayout.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (30:8):

it isn't just:
yarn workspace web add -D @babel/plugin-syntax-export-default-from

and
config-overrides.js

  config.module.rules[2].oneOf[1].options.plugins = [
    require.resolve("babel-plugin-react-native-web"),
    require.resolve("@babel/plugin-syntax-export-default-from"),
  ].concat(config.module.rules[2].oneOf[1].options.plugins);

i'm trying to add reactnavigation https://reactnavigation.org/docs/hello-react-navigation

[brunolemos]

The correct plugin name seems to be @babel/plugin-proposal-export-default-from, see this link: https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from

But yes, just adding to config-overrides.js should be enough to fix this kind of error.

[nadjsyrb]

Just this should work?

yarn workspace web add -D @babel/plugin-proposal-export-default-from

packages/web/config-overrides.js

const fs = require("fs");
const path = require("path");
const webpack = require("webpack");

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [resolveApp("src"), resolveApp("../common/src")];

module.exports = function override(config, env) {
  // allow importing from outside of src folder
  config.resolve.plugins = config.resolve.plugins.filter(
    (plugin) => plugin.constructor.name !== "ModuleScopePlugin"
  );
  config.module.rules[0].include = appIncludes;
  config.module.rules[1] = null;
  config.module.rules[2].oneOf[1].include = appIncludes;
  config.module.rules[2].oneOf[1].options.plugins = [
    require.resolve("babel-plugin-react-native-web"),
    require.resolve("@babel/plugin-proposal-export-default-from"),
  ].concat(config.module.rules[2].oneOf[1].options.plugins);
  config.module.rules = config.module.rules.filter(Boolean);
  config.plugins.push(
    new webpack.DefinePlugin({ __DEV__: env !== "production" })
  );
  return config;
};

Because it still priting:

node_modules/react-native-gesture-handler/DrawerLayout.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (30:8):
[1] 
[1]   28 | const SETTLING = 'Settling';
[1]   29 | 
[1] > 30 | export type PropType = {
[1]      |        ^
[1]   31 |   children: any,
[1]   32 |   drawerBackgroundColor?: string,
[1]   33 |   drawerPosition: 'left' | 'right',
[1] 
[1] Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.

When i yarn workspace web start

[brunolemos]

export type seems like a flow syntax.

Try this plugin instead: @babel/plugin-transform-flow-strip-types

If it still doesn't work you might need to enable flow on create-react-app, see this docs:
https://create-react-app.dev/docs/adding-flow/

[nadjsyrb]

This problem appear after i add:

import React from "react";
import 'react-native-gesture-handler';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from "react-native";

on packages/components/src/app.tsx

even after add
yarn workspace web add -D @babel/plugin-transform-flow-strip-types
and

  config.module.rules[2].oneOf[1].options.plugins = [
    require.resolve("babel-plugin-react-native-web"),
    require.resolve("@babel/plugin-proposal-export-default-from"),
    require.resolve("@babel/plugin-transform-flow-strip-types"),
  ].concat(config.module.rules[2].oneOf[1].options.plugins);

it still the same

i gonna take a look on this adding-flow :/
no idea how to add this stuffs in create-react-app :o

ty for all help from here and this project is amazing ;)

[brunolemos]

okay! I also updated many things on this repository, maybe try cloning again.
it now uses create-react-app v4 instead of v3. and also added nextjs.