本文档旨在解决在使用 Mantine UI 构建可复用组件库并在其他项目中引入时，遇到的 TypeError: Cannot read properties of null (reading 'useContext') 错误。该错误通常与模块编译方式有关。通过修改 TypeScript 配置文件，将 CommonJS 编译方式改为 ESM，可以有效解决此问题，并确保组件库的正常使用。
问题描述
在使用 Mantine UI 作为基础，构建自己的组件库并发布到 npm 后，在另一个 React 项目中使用该组件库时，可能会遇到以下错误：
TypeError: Cannot read properties of null (reading 'useContext')
这个错误通常表明 Mantine UI 相关的 Context 在组件树中没有正确提供。尽管你在使用组件库的项目中已经包裹了 MantineProvider，但问题依然存在。
问题分析
根本原因在于组件库的编译方式。如果你的组件库使用 TypeScript 编译为 CommonJS (CJS) 模块，则可能会导致在使用组件库的项目中，Mantine UI 的 Context 无法正确传递。这是因为 CJS 和 ESM 模块在处理依赖关系的方式上有所不同，可能导致 Context 丢失。
解决方案：将组件库编译为 ESM
解决此问题的关键是将组件库编译为 ECMAScript 模块 (ESM)。这可以通过修改组件库的 tsconfig.json 文件来实现。
修改 tsconfig.json
打开组件库的 tsconfig.json 文件，并进行如下修改：
{
"exclude": ["node_modules"],
"include": ["src"],
"compilerOptions": {
"module": "ES2020", // 将 module 设置为 ESM 相关的值，例如 "ES2020", "ESNext"
"declaration": true,
"outDir": "dist/esm",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"removeComments": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react",
"moduleResolution": "node",
"lib": ["dom", "es2016", "esnext.asynciterable"],
"sourceMap": true,
"declarationDir": "dist/types"
}
}关键配置项解释：
- module: 将其设置为 "ES2020" 或 "ESNext"，指定 TypeScript 编译器生成 ESM 模块。
- outDir: 指定 ESM 模块的输出目录，例如 "dist/esm"。
- esModuleInterop: 设置为 true，允许 CommonJS 模块和 ES 模块之间的互操作。
重新编译组件库
在修改 tsconfig.json 后，重新编译组件库。确保编译输出目录（例如 dist/esm）包含 ESM 格式的模块文件。
重新发布组件库
将重新编译后的组件库发布到 npm。
在使用组件库的项目中更新依赖
在使用组件库的项目中，更新组件库的依赖，并确保安装的是最新版本。
示例代码
以下是一个简单的 Mantine UI 组件示例，用于验证解决方案：
import React from "react";
import { Button as MantineButton } from "@mantine/core";
import PropTypes from "prop-types";
const ButtonTest = ({ label, backgroundColor = "red", handleClick }) => {
const style = {
backgroundColor,
border: "none",
padding: "10px",
};
return (
{label}
);
};
ButtonTest.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
handleClick: PropTypes.func,
};
export default ButtonTest;确保在使用此组件的项目中，已经正确引入并使用了 MantineProvider。
注意事项
- 确保你的 TypeScript 版本是最新的，以支持最新的 ESM 特性。
- 在更新组件库依赖后，清除 node_modules 目录并重新安装依赖，以避免缓存问题。
- 检查构建工具（例如 webpack, rollup）的配置，确保它们正确处理 ESM 模块。
总结
通过将组件库编译为 ESM 模块，可以有效解决在使用 Mantine UI 构建组件库时遇到的 useContext 报错问题。这种方法确保了 Mantine UI 的 Context 在组件树中正确传递，从而保证了组件库的正常运行。 记住，在修改配置后，一定要重新编译、发布并更新依赖。
