How to use rollup with react. Getting useRef error

Question

I am having trouble with my rollup config. I am using storybook to run my component from my dist folder. I see this error in the browser:

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

Edit: It's not just useRef. All hooks are null in my browser/bundle. Something is going wrong...

rollup config:

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:

"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"
},

my component :

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;

in the browser :

What am i doing wrong? Do i need to transpile the react code? I think i am adhering to hook rules. If you need anything else to help me, let me know.

Answer 1

Sooo i fixed my problem. It was due to the missing external peer dependency. React was not present in the resulting bundle. The rollup config was missing this line:

...         
external: ["react", "react-dom"],
...