Next.js 项目启动报错："Invariant Violation: Minified React error #321" 的解决方法

在使用 Next.js 开发前端项目时，有时候会遇到启动报错："Invariant Violation: Minified React error #321"。这个错误通常是由于引入了多个版本的 React 库而导致的，本文将详细介绍这个问题及其解决方法。

问题分析

在开发 Next.js 项目时，我们通常会引入 React 库，这个库可以通过不同的方式进行引入，例如：

import React from 'react';

或者

const React = require('react');

如果我们同时使用了这两种方式来引入 React 库，就会导致出现多个版本的 React 库同时存在的情况，这就会引发 "Invariant Violation: Minified React error #321" 错误。

这个错误的原因是 React 库在被压缩后会生成一个唯一的标识符，如果存在多个版本的 React 库，这个标识符就会出现冲突，从而导致错误的出现。

解决方法

要解决 "Invariant Violation: Minified React error #321" 错误，我们需要确保只引入了一个版本的 React 库。下面是几个解决方法：

方法一：使用 alias

我们可以在 webpack 配置中使用 alias，将所有的 React 库都指向同一个版本，这样就可以避免出现多个版本的问题。

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react'),
    },
  },
};

方法二：使用 externals

我们可以将 React 库通过 externals 的方式排除在打包范围之外，这样就可以避免多个版本的 React 库被打包进去。

// webpack.config.js
module.exports = {
  externals: {
    react: 'React',
  },
};

方法三：手动删除重复的 React 库

我们可以手动检查项目中引入的 React 库，并删除多余的库，保留一个版本即可。

示例代码

下面是一个示例代码，演示了如何解决 "Invariant Violation: Minified React error #321" 错误。

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react'),
    },
  },
};

// app.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

总结

在使用 Next.js 开发前端项目时，如果出现了 "Invariant Violation: Minified React error #321" 错误，可以通过使用 alias、externals 或者手动删除重复的 React 库来解决。在开发过程中，我们应该尽可能避免引入多个版本的 React 库，以免出现这个错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d834ac1886fbafa45e0248