useCookieValue esm & esnext imports don't work

[jakubriedl]

When I try to import useCookieValue from esm or esnext it fails with error SyntaxError: Cannot use import statement outside a module

// works
import { useCookieValue } from "@react-hookz/web/cjs/useCookieValue/useCookieValue"
// fails
import { useCookieValue } from "@react-hookz/web/esm/useCookieValue/useCookieValue"
// also fails
import { useCookieValue } from "@react-hookz/web/esnext/useCookieValue/useCookieValue"

(node:99638) UnhandledPromiseRejectionWarning: /Users/jakubriedl/repositories/cultureamp/unified-home/node_modules/@react-hookz/web/esnext/useCookieValue/useCookieValue.js:2
import { useCallback, useEffect } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.95575 (/Users/jakubriedl/repositories/cultureamp/unified-home/apps/unified-home/.next/server/pages/_app.js:709:18)
    at __webpack_require__ (/Users/jakubriedl/repositories/cultureamp/unified-home/apps/unified-home/.next/server/webpack-runtime.js:25:43)
    at Object.12273 (/Users/jakubriedl/repositories/cultureamp/unified-home/apps/unified-home/.next/server/chunks/6501.js:409:26)

Prior Issues

haven't found anything relevant

What is the current behavior?

when building our Next.js app it works when importing cjs but crashes when importing esm or esnext with error SyntaxError: Cannot use import statement outside a module.

I think/guess it is caused by the fact that package.json lists "esnext": "esnext/index.js", "module": "esm/index.js",. Which if I understand what that means is when we import from nested file it isn't recognised as "module" and so it use import syntax.

[xobotyi]

🤔 never faced the issue, since i'm transpiling node_modules, and, honestly, have no idea how to work this around.

We're unable to switch to module type, since it will break things for lots of people.

[jakubriedl]

One option I can think of could be make js-cookie as optional require (like below) and publish useCookieValue in the index

let jsCookie
try {
 jsCookie = require('js-cookie')
} catch(e) {
  throw new Error("`js-cookie` is not installed, but it is required for using `useCookieValue`, see https://react-hookz.github.io/web/?path=/docs/side-effect-usecookievalue--example")
}
// ...

[xobotyi]

@jakubriedl barely it is caused by js cookie.

Is any of other hooks viable via esm import?

Reexporting useCookieValue in index will lead to error message for every user even if they're not using it.

[jakubriedl]

all other hooks that are imported directly from index work for us, its just useCookieValue.

What kind of error would users experience if it would be exported in index and using optional require?

[jakubriedl]

I've recently come across exports field in package.json which might be the way how to solve that.

[xobotyi]

@jakubriedl it is only suitable for "type": "module" packages, that we won't be using anytime soon.

[ryanlalchand]

@jakubriedl @xobotyi I have the exact same problem, and only the CJS import works.

I would like to add that also following the docs, import { useCookieValue } from "@react-hookz/web"; yields Module '"@react-hookz/web"' has no exported member 'useCookieValue'.

[xobotyi]

It is described in hook docs, that it is not exported from the index file, because of optional dependency. Since otherwise we'd have to add js-cookie as non-optional dependency and everyone, including ones who not using cookie hook, will have it downloaded.