Is the NPM package working as intended?

[mouhannad-sh]

Hi there,

Thanks for developing this, I'm still new to NPM so please bear with me.

I've tried to include the package using the command: npm install hyperhtml --save

And it shows in my package.json "hyperhtml": "^2.4.2",

however when I try to import it as

const hyperHTML = require('hyperhtml');

none of the hyperHTML functions work. so I tried to use the console to debug it and this is what I got for the following code:

console.log('hyperHTML: ', hyperHTML);
console.log('hyperHTML.bind: ', hyperHTML.wire);
console.log('hyperHTML.wire: ', hyperHTML.bind);

I tried to use the path to the module in my require and that returned the same results

const hyperHTML = require('../../node_modules/hyperhtml/min');

I've tried to the run it on the runkit url https://npm.runkit.com/hyperhtml and it seems to have some issues.

Am I missing anything ?

Thanks !

[Gelio]

Try to require hyperhtml/esm

[mouhannad-sh]

@Gelio That doesn't seem to work, this is the error I get in the console

import Component, {setup} from './classes/Component.js';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

[Gelio]

Try hyperhtml/cjs then, it may work better

[mouhannad-sh]

Tried that as well, I get this error

Uncaught SyntaxError: Identifier 'global' has already been declared

I don't know if it helps, but I'm using the following in my devDependencies

"devDependencies": {
    "browserify": "14.4.0",
    "documentation": "^5.3.3",
    "eslint": "^4.11.0",
    "eslint-config-google": "^0.9.1",
    "jest": "20.0.4",
    "localtunnel": "^1.8.3",
    "parallelshell": "3.0.1",
    "release-it": "2.8.0",
    "uglify-es": "3.0.28",
    "watchify": "3.9.0"
  }

Thanks

[Gelio]

That is honestly quite weird. Importing hyperhtml/ejs works well for me when using Typescript (which has ES6 import syntax). You may try to use babel or typescript to include it if it's not a problem for you :smile:

[WebReflection]

hyperHTML uses the ESM to CJS convention, try with:

const hyperHTML = require('hyperhtml').default;

or , in case it fails, with:

const hyperHTML = require('hyperhtml/cjs').default;

if that fails you have bundlers in the middle that don't understand ESM or CJS, but looking at your dev deps it looks like you have nothing special there that could cause issues.

[mouhannad-sh]

Thanks for all the feedback, but nothing seems to work from the above.

after many trials I tried to modify the module itself, I renamed all constants called 'global' in the '/cjs' directory to '_global' and that seems to have fixed the issue, since this is not an efficient solution, I think I'll just stick to appending a script tag to my document with a CDN url for the time being.

At this stage the only thing I can think about is that I have some dependency causing a conflict with the module's 'global' constant somewhere during runtime.

[WebReflection]

you have quite some popular module there though ... it'd be nice to fix the issue for everyone without needing hacks.

Do you mind trying v2.4.3 and tell me if everything is fine now?

[mouhannad-sh]

I just did and it worked ! Thanks for the quick update 👍 This is what I'm using right now

const hyperHTML = require('hyperhtml/cjs');

Cheers!

[linonetwo]

How to use it on runkit? Maybe we should use viperHTML on runkit?