Cannot read properties of null (reading 'useRef') error

Question

folks! I have a question regarding useRef. I'm bundling a small UI library using rollupJS. Until I bundle the library, a component with useRef inside works fine, but when I'm trying to import it I see the following errors.

error screenshot

And the interesting thing here that even if I just a ref and don't do anything (don't add useEffect) I've got the same error.

Input.tsx

import React from "react";

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

export interface Props {
  className?: string;
  name: string;
  label?: string;
  value?: string;
}

const Input: React.FC<Props> = (props) => {
  const inputRef = React.useRef<HTMLInputElement>(null);

  return (
    <div className={`${styles.componentWrap} ${props.className}`}>
      <input ref={inputRef} placeholder="&nbsp;" value={props.value} />
    </div>
  );
};

Input.displayName = "Input";

Input.defaultProps = {
  className: "",
  label: "Label",
} as Partial<Props>;

export default Input;

tsconfig.json

{
  "compilerOptions": {
    // Default
    "target": "es6",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,

    // Added
    "jsx": "react",
    "module": "ESNext",
    "declaration": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true,
    "resolveJsonModule": true,
    "strictNullChecks": false
  },
}

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import json from "@rollup/plugin-json";
import dts from "rollup-plugin-dts";
import styles from "rollup-plugin-styles";

export default [
  {
    input: "src/components/index.ts",
    output: [
      {
        dir: "ui",
        format: "cjs",
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      styles({
        modules: true,
      }),
      json(),
      commonjs(),

      typescript({
        compilerOptions: {
          declaration: true,
          declarationDir: "ui/types",
        },
        exclude: [
          "node_modules/**",
          "ui",
          "src/**/*.stories.tsx",
          "src/**/*.test.tsx",
        ],
      }),
    ],
  },
  {
    input: "ui/types/components/index.d.ts",
    output: [{ file: "ui/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

package.json

{
  "name": "somename",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "rollup": "rimraf ui && rollup -c",
    "storybook": "start-storybook -p 6006",
  },
  "author": "Author",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@rollup/plugin-commonjs": "^22.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.3.2",
    "@storybook/addon-actions": "^6.5.6",
    "@storybook/addon-essentials": "^6.5.6",
    "@storybook/addon-interactions": "^6.5.6",
    "@storybook/addon-links": "^6.5.6",
    "@storybook/builder-webpack5": "^6.5.6",
    "@storybook/manager-webpack5": "^6.5.6",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.5.6",
    "@storybook/testing-library": "^0.0.11",
    "@types/react": "^18.0.9",
    "babel-loader": "^8.2.5",
    "chromatic": "^6.5.4",
    "css-loader": "^6.7.1",
    "gsap": "^3.10.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "rollup": "^2.74.1",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-dts": "^4.2.1",
    "rollup-plugin-multi-input": "^1.3.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-styles": "^4.0.0",
    "sass": "^1.52.1",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "typescript": "^4.7.2"
  },
  "dependencies": {}
}

Don't have any ideas what is the problem, but might be someone faced with the same issue before? Thanks in advance!

Answer 1

The issue is you are assigning the ref value to be null initially. Also this is a typescript file so typescript throws error that the ref can be null.

As while reading the value cannot be null in the input component it is throwing and error.

You can make sure if the ref is null you don't return anything or better don't assign null to ref or while passing the ref you can add ! after the ref prop.

eg:

<input ref={inputRef!}

You can read about it more here: LINK