在Next.js中导入React Node包时「Cannot read properties of null」错误排查

我正在开发一个包含React模块的Node包，使用Babel和Webpack进行编译。将该包导入到我的Next.js React应用时，出现以下错误：

Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at e.useState (webpack-internal:///../drag.js/dist/bundle.js:2:13456)
    at j (webpack-internal:///../drag.js/dist/bundle.js:2:18123)
    at renderWithHooks (file://D:\Code\drag.js\test\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)

该错误源自我开发的包，不清楚为何它无法识别React。移除包中的useState后可正常运行。

包中组件代码 #

import React, { useState } from "react";

import flow from "flow.scss";
import styles from "./Drag.module.scss";

const Drag = ({ elements, setElements }) => {
    // States
    const [draggedElement, setDraggedElement] = useState(null);
    const [draggedOverlap, setDraggedOverlap] = useState(null);

    // Handlers

    // Handle dragging an element.
    const handleDragStart = (e) => {};
    const handleDrag = (e) => {};
    const handleDragEnd = (e) => {};
    const handleDrop = (e) => {};

    // Handle when an element is dragged over another element.
    const handleDragEnter = (e) => {};
    const handleDragOver = (e) => {};
    const handleDragLeave = (e) => {};

    // Handle updating/sorting array.
    const handleUpdateElements = () => {};

    return (
        <div className={`${styles["drag-parent"]} flex column gap padding`}>
            {elements &&
                elements.map((child, index) => {
                    return (
                        <div
                            className={`${styles["drag-child"]} flex column padding`}
                            key={index}
                            onDrag={handleDrag} // 该元素正在被拖拽
                            onDragEnd={handleDragEnd} // 该元素停止被拖拽
                            onDragEnter={handleDragEnter} // 被拖拽的元素进入当前元素范围
                            onDragLeave={handleDragLeave} // 被拖拽的元素离开当前元素范围
                            onDragOver={handleDragOver} // 被拖拽的元素悬停在当前元素上方
                            onDragStart={handleDragStart} // 该元素开始被拖拽
                            onDrop={handleDrop} // 元素被放置到有效目标上
                        >
                            <div className={`${styles["drag-handle"]}`}></div>
                            {child}
                        </div>
                    );
                })}
        </div>
    );
};

export default Drag;

.babelrc配置 #

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.js配置 #

const path = require("path");

module.exports = {
    mode: "production",
    entry: "./src/Drag.jsx",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        libraryTarget: "umd",
        library: "Drag",
        libraryExport: "default",
        globalObject: "this",
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                    },
                },
            },
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
            react: path.resolve("./node_modules/react"),
        },
    },
};

包的package.json配置 #

{
    "name": "drag.jsx",
    "version": "1.0.0",
    "description": "",
    "main": "dist/bundle.js",
    "scripts": {
        "build": "webpack --config webpack.config.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "flow.scss": "^1.0.2",
        "react-icons": "^4.8.0",
        "sass": "^1.62.1"
    },
    "peerDependencies": {
        "react": "^18.2.0"
    },
    "devDependencies": {
        "@babel/core": "^7.21.8",
        "@babel/preset-env": "^7.21.5",
        "@babel/preset-react": "^7.18.6",
        "babel": "^6.23.0",
        "babel-loader": "^9.1.2",
        "css-loader": "^6.7.3",
        "sass-loader": "^13.2.2",
        "style-loader": "^3.3.2",
        "webpack": "^5.83.1",
        "webpack-cli": "^5.1.1"
    }
}

包和应用均使用React 18.2.0，应用基于Next.js开发。

更新：添加externals配置后的新错误 #

在webpack.config.js中添加以下配置后，除原错误外还出现多个新错误：

externals: {
        react: "react",
    },

新错误信息：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
 1. You might have mismatching versions of React and the renderer (such as React DOM)
 2. You might be breaking the Rules of Hooks
 3. You might have more than one copy of React in the same app
 4. ...

（我仅在函数组件内部调用钩子，推测该错误是编译问题导致的误导信息。）

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

内容的提问来源于stack exchange，提问作者Tim