Import default issue (Cannot read properties of undefined)

[ak99372]

Can someone shed some light on default import (using Typescript). This is the code using default import (matching the types from index.d.ts)

import hyperactiv from "hyperactiv";
export const observe = hyperactiv.observe;

but then during run time default is undefined

exports.observe = hyperactiv_1.default.observe;
                                       ^
TypeError: Cannot read properties of undefined (reading 'observe')

if I do instead import * as hyperactiv from "hyperactiv"; then compiler complains about hyperactiv.observe but it works at runtime.

(my tsconfig: "module": "CommonJS")

[elbywan]

Hey @ak99372,

I tried to reproduce locally but it seems to be working fine for me with a regular setup (node 18, typescript latest).

Here is what I did:

# init a brand new typescript project
mkdir ts-hyperactiv
cd ts-hyperactiv

# install the deps
npm i -D typescript
npm i hyperactiv

# init typescript
./node_modules/.bin/tsc --init

# create an index file
mkdir src
echo "import hyperactiv from 'hyperactiv'

const obj = hyperactiv.observe({
  a: 0,
  b: 0,
  c: 0
})
hyperactiv.computed(() => {
  obj.c = obj.a + obj.b
})

obj.a = 1
console.log(obj.c)" > src/index.ts

# transpile to js
./node_modules/.bin/tsc

# run
node src/index.js
# output: 1

[ak99372]

Thanks for looking into this @elbywan. I tried few different things myself, I have a monorepo with a lot of local commonjs packages. The issue points back to the tsconfig setup I use when transpiling .ts with tsc. Adding "esModuleInterop": true (to the project that imports hyperactiv) adds additional code to .js to handle couple more cases of importing default and that fixed the error. Maybe something to check out closer (otherwise we can close this).

[jnreis]

Hi @ak99372 and @elbywan. The issue is the incorrect path of the type definitions in the package.json file.

Below you will find the updated package.json that fixes that. I may send a PR for this, if @elbywan doesn’t get to it first.

Thank you @elbywan. I'm using hyperactiv in a project and it works great, it saved me many lines of code.

    "name": "hyperactiv",
    "version": "0.11.3",
    "description": "Super small observable & reactive objects library.",
    "main": "./dist/index.js",
    "module": "./src/index.js",
    "types": "./types/index.d.ts",
    "typesVersions": {
        "*": {
            "*": ["./types/*"]
        }
    },
    "exports": {
        ".": {
            "node": {
                "import": "./dist/index.mjs",
                "require": "./dist/index.js"
            },
            "default": "./src/index.js",
            "types": "./types/index.d.ts"
        },
        "./react": {
            "node": {
                "import": "./dist/react/index.mjs",
                "require": "./dist/react/index.js"
            },
            "default": "./src/react/index.js",
            "types": "./types/react/index.d.ts"
        },
        "./classes": {
            "node": {
                "import": "./dist/classes/index.mjs",
                "require": "./dist/classes/index.js"
            },
            "default": "./src/classes/index.js",
            "types": "./types/classes/index.d.ts"
        },
        "./handlers": {
            "node": {
                "import": "./dist/handlers/index.mjs",
                "require": "./dist/handlers/index.js"
            },
            "default": "./src/handlers/index.js",
            "types": "./types/handlers/index.d.ts"
        },
        "./http": {
            "node": {
                "import": "./dist/http/index.mjs",
                "require": "./dist/http/index.js"
            },
            "default": "./src/http/index.js",
            "types": "./types/http/index.d.ts"
        },
        "./websocket/server": {
            "import": "./dist/websocket/server.mjs",
            "require": "./dist/websocket/server.js",
            "types": "./types/websocket/server.d.ts"
        },
        "./websocket/browser": {
            "default": "./dist/websocket/browser.js",
            "types": "./types/websocket/browser.d.ts"
        },
        "./package.json": "./package.json"
    },
    "repository": "https://github.com/elbywan/hyperactiv",
    "bugs": {
        "url": "https://github.com/elbywan/hyperactiv/issues"
    },
    "files": [
        "src",
        "types",
        "dist"
    ],
    "scripts": {
        "start": "npm run lint && npm run build && npm run test",
        "lint": "eslint ./src ./test",
        "lint:fix": "eslint --fix ./src ./test",
        "build": "npm run build:types && npm run build:core && npm run build:handlers && npm run build:react && npm run build:classes && npm run build:websocket && npm run build:http",
        "build:types": "tsc",
        "build:core": "rollup -c config/rollup.config.js",
        "build:handlers": "rollup -c config/rollup.handlers.config.js",
        "build:react": "rollup -c config/rollup.react.config.js",
        "build:http": "rollup -c config/rollup.http.config.js",
        "build:classes": "rollup -c config/rollup.classes.config.js",
        "build:websocket": "rollup -c config/rollup.websocket.config.js",
        "test": "jest",
        "clean": "rimraf {dist,types}",
        "prepublishOnly": "npm start"
    },
    "keywords": [
        "computed properties",
        "computed",
        "reactive",
        "observable",
        "observe",
        "react",
        "store",
        "normalize"
    ],
    "author": "Julien Elbaz",
    "license": "MIT",
    "jest": {
        "collectCoverage": true,
        "collectCoverageFrom": [
            "src/**/*.js"
        ],
        "coveragePathIgnorePatterns": [
            "/node_modules/",
            "/test/",
            "/src/websocket/browser.js"
        ]
    },
    "devDependencies": {
        "@babel/core": "^7.17.10",
        "@babel/eslint-parser": "^7.17.0",
        "@babel/preset-env": "^7.17.10",
        "@babel/preset-react": "^7.16.7",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.2.0",
        "@types/jest": "^27.5.0",
        "babel-jest": "^28.1.0",
        "eslint": "^8.15.0",
        "eslint-plugin-jest": "^26.1.5",
        "eslint-plugin-react": "^7.29.4",
        "jest": "^28.1.0",
        "jest-environment-jsdom": "^28.1.0",
        "node-fetch": "^2",
        "normaliz": "^0.2.0",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
        "react-test-renderer": "^18.1.0",
        "rimraf": "^3.0.2",
        "rollup": "^2.72.0",
        "rollup-plugin-terser": "^7.0.2",
        "typescript": "^4.6.4",
        "wretch": "^1.7.9",
        "ws": "^7"
    },
    "peerDependenciesMeta": {
        "react": {
            "optional": true
        },
        "react-dom": {
            "optional": true
        },
        "normaliz": {
            "optional": true
        },
        "wretch": {
            "optional": true
        }
    }
}