I'm trying to transpile all code in my application from es6 to es5 since I'm having issues with Safari 9 and IE11.
However when I include node_modules in my babel.config.js I get the following error
SyntaxError: /Users/salmanmohamed/Documents/apps/rapioUserApp/App.js: Support for the experimental syntax 'jsx' isn't currently enabled (41:5):
39 | //return <Text>Hii</Text>;
40 | return loading ? (
> 41 | <LoadingLayout>
| ^
42 | <LoadingText>{copy.loading.texts.fonts}</LoadingText>
43 | <ActivityIndicator />
44 | </LoadingLayout>
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.
I've tried adding the react preset, but I still get the same error, same when trying to add the plugin-syntax-jsx
I'm using the following stacks
React Native with EXPO React Native for web with Expo
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
//exclude: [/\bcore-js\b/, /\bwebpack\/buildin\b/,/\bnode_modules/],
include: /(node_modules)/,
test: /\.(tsx?)|(js)$|(jsx)$/,
presets: [
["@babel/react"],
["@babel/preset-typescript"],
[
"@babel/preset-env",
{
corejs: { version: 3 },
useBuiltIns: "usage",
targets: {
esmodules: true,
browsers: [
"last 5 versions",
"ie >= 9",
" safari >= 7",
"ios_saf >= 9",
],
},
loose: true,
},
],
[
"babel-preset-expo",
{
corejs: { version: 3 },
targets: {
esmodules: true,
browsers: [
"last 5 versions",
"ie >= 9",
"safari >= 7",
"ios_saf >= 9",
],
},
},
],
],
plugins: [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-computed-properties",
[
"module-resolver",
{
alias: {
"@Components": "./components",
"@Containers": "./containers",
"@Hooks": "./hooks",
"@Controllers": "./controllers",
"@Assets": "./assets",
"@Helpers": "./helpers",
"@Actions": "./actions",
"@Services": "./services",
"@Utils": "./utils",
},
},
],
],
};
};
webpack.config.js
const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { getExpoBabelLoader } = require("@expo/webpack-config/utils");
const modulesToTranspile = [
"ansi-regex",
"ansi-styles",
"chalk",
"react-dev-utils",
];
module.exports = async function (env, argv) {
env.babel = { dangerouslyAddModulePathsToTranspile: modulesToTranspile };
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
const loader = getExpoBabelLoader(config);
if (loader) {
// Modify the loader...
loader.include("@babel/polyfill");
loader.include("react-app-polyfill");
loader.include("react-app-polyfill/ie9");
loader.include("react-app-polyfill/ie11");
loader.include("core-js");
// console.warn(loader)
}
return config;
};
Including the plugins in my webpack worked for me
const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { getExpoBabelLoader } = require("@expo/webpack-config/utils");
const modulesToTranspile = [
"ansi-regex",
"ansi-styles",
"chalk",
"react-dev-utils",
"@react-navigation",
"styled-components",
"node_modules",
];
module.exports = async function (env, argv) {
env.babel = { dangerouslyAddModulePathsToTranspile: modulesToTranspile };
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
const loader = getExpoBabelLoader(config);
if (loader) {
loader.include("@babel/plugin-proposal-class-properties");
loader.include("@babel/plugin-transform-arrow-functions");
loader.include("@babel/plugin-transform-block-scoping");
loader.include("@babel/plugin-transform-sticky-regex");
loader.include("@babel/plugin-transform-unicode-regex");
loader.include("@babel/plugin-transform-dotall-regex");
loader.include("@babel/plugin-transform-named-capturing-groups-regex");
loader.include("@babel/plugin-transform-runtime");
// console.warn(loader)
}
return config;
};