Support for the experimental syntax 'jsx' isn't currently enabled in Next - next.config.js doesn't work well

So I've got a next app (based on React Native Web) with package.json in several locations as well as tsconfig.json in several places.

I am trying to solve an error I am getting:

Support for the experimental syntax 'jsx' isn't currently enabled (21:5):  19 | const GeneralStatusBarColor = ({ backgroundColor, height, ...props }) => {  20 |   return (> 21 |     <SafeAreaView style={{ height: height, backgroundColor: backgroundColor }}>     |     ^  22 |       <StatusBar  23 |         {...props}  24 |         backgroundColor={backgroundColor}

But in my next folder, I have a .babelrc:

{"presets": ["next/babel",    ["babel-preset-expo", { "jsxRuntime": "automatic" }]  ],"plugins": [    ["@babel/plugin-proposal-class-properties", { "loose": true }],    ["@babel/plugin-proposal-private-methods", { "loose": true }],    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],"react-native-reanimated/plugin",    ["module-resolver",      {"root": "../../packages","alias": {"app": "../../packages/app","components": "../../packages/app/components","config": "../../packages/app/config","controllers": "../../packages/app/controllers","pages": "../../packages/app/pages","features": "../../packages/app/features","reducers": "../../packages/app/redux","resources": "../../packages/app/resources","revenuecat": "../../packages/app/revenuecat","routing": "../../packages/app/routing","utils": "../../packages/app/utils","interfaces": "../../packages/app/interfaces","root": "./"        }      }    ]  ]}

This works perfectly fine in another similarly structured app of mine.

But here, I need to have a next.config.js, and I think that's messing up other parts of my app.

Here's what the webpack part of my next.config.js looks like:

  config.module.rules.push({    test: /.(js|ts|tsx)$/,    exclude: /node_modules/,    loader: 'babel-loader',    options: {      presets: ['next/babel',        ['babel-preset-expo', { jsxRuntime: 'automatic' }],'@babel/react',      ],      plugins: [        ['module-resolver',          {            root: '../../packages',            alias: {              app: '../../packages/app',              components: '../../packages/app/components',              config: '../../packages/app/config',              controllers: '../../packages/app/controllers',              pages: '../../packages/app/pages',              features: '../../packages/app/features',              reducers: '../../packages/app/redux',              resources: '../../packages/app/resources',              revenuecat: '../../packages/app/revenuecat',              routing: '../../packages/app/routing',              utils: '../../packages/app/utils',              interfaces: '../../packages/app/interfaces',            },          },        ],      ],    },  });

This works to get rid of the error, but seems a bunch extra on top of the .babelrc elsewhere?

However, when I add this code, I get the following error:

ReferenceError: __DEV__ is not defined

The fix for this... remove .babelrc.

Which if I do so, causes this error (likely due to SWC):

error - ../../node_modules/react-native-web/src/modules/normalizeColor/index.jsError:  x Unexpected token `:`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, `  | for template literal, (, or an identifier    ,---- 13 | const normalizeColor = (color?: number | string, opacity?: number = 1): void | string => {

But I am also trying to solve that in my next.config.js with this:

  config.resolve.alias = {    ...(config.resolve.alias || {}),'react-native$': 'react-native-web','@expo/vector-icons': 'react-native-vector-icons',  };

So I am just totally lost - I have a site with a similar config, but for some reason every time I am trying to get this site to work, there's some other error that's causing the whole app to not work, and there seems to be no consistency. I have been trying to fight this collection of errors for four days now.