Expo and Next.Js interfering when npm install - npm

Question

Im trying to setup a next js with native base and following the instructions, I am getting this.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: next-latest#undefined
npm ERR! Found: next#12.0.4
npm ERR! node_modules/next
npm ERR! next#"12.0.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next#"^11" from #expo/next-adapter#3.1.10
npm ERR! node_modules/#expo/next-adapter
npm ERR! dev #expo/next-adapter#"^3.1.10" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Zacha\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Zacha\AppData\Local\npm-cache\_logs\2022-01-20T00_16_08_660Z-debug-0.log
Aborting installation.
npm install has failed.

Answer 1

Try Following Steps.
Downgrade your next to 11
npm install next#11
Changes next.config.js to following code.
const { withExpo } = require('#expo/next-adapter');
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
'native-base',
'react-native-svg',
'react-native-safe-area-context',
'#react-aria/visually-hidden',
'#react-native-aria/button',
'#react-native-aria/checkbox',
'#react-native-aria/combobox',
'#react-native-aria/focus',
'#react-native-aria/interactions',
'#react-native-aria/listbox',
'#react-native-aria/overlays',
'#react-native-aria/radio',
'#react-native-aria/slider',
'#react-native-aria/tabs',
'#react-native-aria/utils',
'#react-stately/combobox',
'#react-stately/radio',
]);
module.exports = withPlugins(
[withTM, [withExpo, { projectRoot: __dirname }], { webpack5: true }],
{
webpack: config => {
config.resolve.alias = {
...(config.resolve.alias || {}),
// Transform all direct `react-native` imports to `react-native-web`
'react-native$': 'react-native-web',
};
config.resolve.extensions = [
'.web.js',
'.web.ts',
'.web.tsx',
...config.resolve.extensions,
];
return config;
},
}
);
Add import React from 'react'; to _app.js.