how to enable exportDefaultFrom?
nadjsyrb opened this issue · 5 comments
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
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.
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
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/
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 ;)
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.