使用Rollup打包React组件时出现useRef等Hooks为空错误

错误信息 #

TypeError: Cannot read properties of null (reading 'useRef')
at n.useRef (http://localhost:6006/main.iframe.bundle.js:1753:38452)

补充说明：不止useRef，浏览器打包文件中所有React Hooks均为空，肯定是配置哪里出错了。

Rollup配置 #

export default [
    {
        input: 'src/index.ts',
        output: [
            {
                file: 'dist/index.js',
                format: 'esm',
                exports: 'named',
                sourcemap: true,
            },
        ],
        plugins: [
            alias({
                entries: [{ find: '@/stuff', replacement: 'files.js' }],
            }),
            copy({
                targets: [
                    { src: 'src/asdf/**/*.chunk.js', dest: 'dist/public' },
                ],
            }),
            external(),
            resolve(),
            // convert modules to ES6
            commonjs(),
            // exclude test data and chunk files from typescript
            typescript({
                tsconfig: './tsconfig.json',
                exclude: ['**/testData/**/*', '**/*.chunk.js'],
            }),
            terser(),
            babel({ babelHelpers: 'bundled' }),
        ],
    },
    {
        input: 'dist/types/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'es' }],
        plugins: [dts()],
    },
];

依赖项 #

"dependencies": {
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10"
},
"devDependencies": {
    "@rollup/plugin-alias": "^4.0.2",
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-typescript": "^10.0.1",
    "@storybook/addon-actions": "^6.5.15",
    "@storybook/addon-docs": "^6.5.15",
    "@storybook/addon-essentials": "^6.5.15",
    "@storybook/addon-interactions": "^6.5.15",
    "@storybook/addon-links": "^6.5.15",
    "@storybook/builder-webpack5": "^6.5.15",
    "@storybook/manager-webpack5": "^6.5.15",
    "@storybook/node-logger": "^6.5.15",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.15",
    "@storybook/testing-library": "^0.0.13",
    "@types/node": "18.11.18",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "^5.0.1",
    "rollup": "^3.9.1",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-dts": "^5.1.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "tslib": "^2.4.1",
    "typescript": "4.9.4",
    "webpack": "^5.75.0"
},

组件代码 #

const component = ({ Collection, Configuration, get }: Props) => {
    const DomRef = useRef<HTMLDivElement>(null);
    const ObjRef = useRef<myType>(null);

    useEffect(() => {
        ObjRef.current = new external.Player(DomRef.current!, Configuration, Collection);

        if (get) {
            get(ObjRef.current);
        }

        return () => {
            if (get.current) {
                ObjRef.current.dispose();
            }
        };
    }, []);

    return <div ref={DomRef!} />;
};

export default component;

错误截图 #

问题 #

请问我哪里配置出错了？是否需要转译React代码？我认为自己遵循了Hook规则，若需要更多信息请告知。

内容的提问来源于stack exchange，提问作者Divide by Zero