npm install 时 Expo 和 Next.Js 干扰答案

【问题标题】：Expo and Next.Js interfering when npm installnpm install 时 Expo 和 Next.Js 干扰
【发布时间】：2022-01-21 19:19:09
【问题描述】：

我正在尝试使用本机基础设置下一个 js，并按照说明进行操作，我得到了这个。

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.

【问题讨论】：

要么将 Next.js 降级到 v11 以满足 @expo/next-adapter 对 next 的对等依赖，要么按照错误提示运行 npm install --legacy-peer-deps。
嘿，你是怎么解决你的问题的？ @MrZCookie

标签： npm next.js expo

【解决方案1】：

尝试以下步骤。

将你的 next 降级到 11

npm install next@11
将 next.config.js 更改为以下代码。

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;
    },
  }
);

将import React from 'react'; 添加到_app.js。

【讨论】：