1

I'm currently working on creating a component library from Material UI using TypeScript and Rollup. I have successfully published the package, but when I try to import it into a new project, I am getting the following error:

"Uncaught TypeError: Cannot read properties of null (reading 'useContext')"

I am not sure what is causing this error, as the library works fine when I test it locally. I have checked my dependencies and everything seems to be in order. Has anyone else experienced this issue or have any suggestions on how to solve it? Thank you in advance for any help you can provide.

package.json

{
  "name": "*****",
  "version": "0.1.24",
  "engines": {
    "node": ">=8.3.0"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  },
  "repository": "https://github.com/****/****.git",
  "babel": {
    "presets": [
      [
        "react-app",
        {
          "absoluteRuntime": false
        }
      ]
    ]
  },
  "dependencies": {
    "@changesets/cli": "^2.26.0",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fontsource/dm-sans": "^4.5.9",
    "@fontsource/material-icons": "^4.5.4",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.10",
    "@tabler/icons": "2.6.0",
    "@tabler/icons-react": "2.7.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.12",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "cross-env BABEL_ENV=production babel src -d dist",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "prepare": "husky install",
    "release": "npm publish && yarn changeset",
    "rollup": "rollup -c"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-image": "^3.0.2",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-terser": "^0.4.0",
    "@rollup/plugin-typescript": "^11.0.0",
    "@rollup/plugin-url": "^8.0.1",
    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.5.16",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",
    "@typescript-eslint/eslint-plugin": "^5.54.0",
    "@typescript-eslint/parser": "^5.54.0",
    "auto": "^10.43.0",
    "babel-plugin-named-exports-order": "^0.0.2",
    "cross-env": "^7.0.3",
    "eslint": "^8.35.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-node": "^4.1.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "file-loader": "^6.2.0",
    "husky": "^8.0.0",
    "prettier": "^2.8.4",
    "prop-types": "^15.8.1",
    "rollup": "^3.20.2",
    "rollup-plugin-dts": "^5.3.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "style-loader": "^3.3.1",
    "typescript": "^4.9.5",
    "webpack": "^5.75.0"
  },
  "lint-staged": {
    "*": [
      "eslint src --ext .js,.jsx,.ts,.tsx --fix",
      "prettier --write src"
    ]
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "type": "module"
}

rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import url from '@rollup/plugin-url';
import dts from 'rollup-plugin-dts';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

import packageJson from './package.json' assert { type: 'json' };

export default [
    {
        input: 'src/index.tsx',
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true,
                name: 'react-ts-lib',
            },
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: true,
            },
        ],
        plugins: [
            url({
                // by default, rollup-plugin-url will not handle font files
                include: ['**/*.woff', '**/*.woff2'],
                // setting infinite limit will ensure that the files
                // are always bundled with the code, not copied to /dist
                limit: Infinity,
            }),
            external(),
            resolve(),
            commonjs(),
            typescript({ tsconfig: './tsconfig.json' }),
            postcss(),
            terser(),
        ],
    },
    {
        input: 'dist/esm/types/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'esm' }],
        external: [/\.css$/],
        plugins: [dts()],
    },
];
Mayur Sonawane
  • 109
  • 1
  • 8

2 Answers2

1

If you are facing an issue with multiple installations of React and React DOM causing problems, removing these packages and adding the following snippet to your package.json file should solve the issue:

"peerDependencies": {
  "@emotion/react": "^11.5.0",
  "@emotion/styled": "^11.3.0",
  "@types/react": "^17.0.0 || ^18.0.0",
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
  "@types/react": {
    "optional": true
  },
  "@emotion/react": {
    "optional": true
  },
  "@emotion/styled": {
    "optional": true
  }
}

By adding these peer dependencies to your package.json file, you are specifying the required versions of the packages that your code needs to function properly. The "optional": true flag allows these packages to be installed as optional dependencies, which means they will not be installed multiple times and cause conflicts.

Make sure to run npm install or yarn install after updating your package.json file to ensure that the changes take effect. This should resolve any issues with multiple installations of React and React DOM and ensure that your code runs smoothly.

Mayur Sonawane
  • 109
  • 1
  • 8
1

Another link discussing potential problems & possible solutions & best-practices for such a setup is here

fritz
  • 698
  • 6
  • 12