'tsdx - react is null, prevents hook usage

I've recently tried creating a react typescript component using tsdx to compile and I've hit a bit of a wall when debugging. The package is published and seemingly being published and installed without error. However, when it comes to actually being used I'm always met with:

TypeError: Cannot read properties of null (reading 'useEffect').

I had the same issue with useContext so simply replaced the functionality but now the error has migrated to useEffect.

This package runs totally fine locally, if I rip out all the code and inject it into an app manually it runs without issue. Initially I was just destructuring the useEffect hook from react but even when explicitly importing react as import React from 'react'; react is still apparently null...

Looking into the .cjs files I can see React being imported:

var React = _interopDefault(require('react'));

yet the issue persists.

Any and all help is appreciated, will paste some info from my package.json if it helps :)

{
  "name": "xxxx",
  "version": "x.x.x",
  "description": "xxxx",
  "author": "xxx xxx",
  "keywords": [],
  "main": "dist/index.js",
  "module": "dist/xxx.esm.js",
  "typings": "dist/index.d.ts",
  "engines": {
    "node": ">=10"
  },
  "files": [
    "dist",
    "src",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xxxx/xxxx.git"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.0",
    "@types/node": "^16.11.34",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.3",
    "axios": "^0.27.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "npx tsdx build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "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.17.10",
    "@babel/core": "^7.17.12",
    "@babel/preset-env": "^7.17.12"
  },
  "bugs": {
    "url": "https://github.com/xxxx/xxxx/issues"
  },
  "homepage": "https://github.com/xxxx/xxxx#readme",
  "license": "ISC"
}

Edit: Also if it's worth noting - this project was not initialised as a tsdx project, I added the tsdx build script and some elements to the tsconfig and package.json after running into packaging issues prior to switching

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'tsdx - react is null, prevents hook usage

Sources

Related Questions