Compatibility with preact

[piotr-cz]

React version (preact 10.5.12)

Concurrent mode no

Rest Hooks version (e.g., 5.0.6)

Describe the bug (This is rather a feature request but IMO it's more appropriate to use bug template)
This package seems to not work with Preact (alternative to React with compatible API).

Problem comes up when wrapping an application with <CacheProvider>.
Engine stops rendering any children and what's unfortunate doesn't show any errors.

Small hint is that ot does render when I remove context providers and keep just {children} in
https://github.com/coinbase/rest-hooks/blob/e1e353dfc64725c79ab99bb6a0c85114399c6dfc/packages/core/src/react-integration/provider/CacheProvider.tsx#L56-L64

To Reproduce
Steps to reproduce the behavior:

1. Create new codesandbox with Preact template
2. Add @rest-hooks/rest & rest-hooks to dependencies
3. Add import { CacheProvider } from 'rest-hooks'; to src/index.js
4. Wrap App by CacheProvider
5. Problem: Rendered output disappears

Or check codesandbox example

Expected behavior
Package works with Preact just as it would with React

Additional context
No console errors.

[ntucker]

Thanks for your interest!

Rest Hooks imports createContext from React itself (listed as a peerDep). Seems like you would need to tell your build system to change all react imports to preact imports?

Would love addition of a unit test as well as docs instructions for usage with preact. I'm happy to fix any reasonable compatibility to pass said test.

[piotr-cz]

Build system I'm using (WMR/ Rollup) is already configured to alias react to preact/compat.
Same in the codesandbox example, although it uses webpack.

I'm using SWR in same setup without any issues even that it's also using react as peer dependency.

Issue must come from somewhere else.

[ntucker]

I downloaded a zip of the codesandbox, when i run yarn start I get this:

./~/@rest-hooks/core/lib/react-integration/hooks/useResetter.js
7:17-27 "export 'useContext' was not found in 'react'
./~/@rest-hooks/core/lib/react-integration/hooks/useResetter.js
8:24-35 "export 'useCallback' was not found in 'react'
./~/@rest-hooks/core/lib/react-integration/hooks/useFetchDispatcher.js
9:17-27 "export 'useContext' was not found in 'react'
./~/@rest-hooks/core/lib/react-integration/hooks/useFetchDispatcher.js
10:24-35 "export 'useCallback' was not found in 'react'
./~/@rest-hooks/core/lib/react-integration/hooks/useInvalidateDispatcher.js
7:17-27 "export 'useContext' was not found in 'react'
./~/@rest-hooks/core/lib/react-integration/hooks/useInvalidateDispatcher.js
8:29-40 "export 'useCallback' was not found in 'react'

Is there something weird with the tooling maybe?

[ntucker]

I don't find useContext anywhere in the node_modules of preact/compat. Are hooks only supported in a beta version of preact?

[ntucker]

According to https://www.npmjs.com/package/preact-compat - it's only for outdated versions of preact, which is probably why it doesn't have hooks.

For Preact X, please uninstall preact-compat and replace your aliases with preact/compat.

The config in codesandbox has:

    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "identity-obj-proxy",
      "^./style$": "identity-obj-proxy",
      "^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
      "^react$": "preact-compat",
      "^react-dom$": "preact-compat",
      "^create-react-class$": "preact-compat/lib/create-react-class",
      "^react-addons-css-transition-group$": "preact-css-transition-group"
    }

[piotr-cz]

yeah, they are: https://preactjs.com/guide/v10/hooks#usecontext

Maybe this would be helpful: https://preactjs.com/guide/v10/switching-to-preact

[ntucker]

Right, but preact-compat is version 8, you need to have preact/compat instead of preact-compat

[piotr-cz]

Ah, seems that the codesandbox template ships with outdated packages

[ntucker]

Got the codesandbox to work by doing two things:

• upgradeing the cli from 1 to 3
• targetting an actual dom node in render render(<My />, document.body);

'root' wasn't actually on the page

[piotr-cz]

Yeah, I've done the same in meantime and it does build and render now.
That would mean the problem is when using Rollup instead of Webpack.

I'll come back to that tomorrow.
Thank you for taking time to look at it. At least we know react-hooks may work with preact.

[ntucker]

Gonna close this for now since it seems to work. Would love any docs contributions on getting start with the library in Preact! :)

[piotr-cz]

I'm sorry, the issue is not resolved.

Compatiblity with Preact may be achieved only in projects created with preact-cli (I assume it's compiling vendor packages with own babel config and does other tweaks).

I've prepared issue reproduction project here: preact-rollup-react-jsx-transforms.

Basically there are two issues:

1. rest-hooks uses global variables (global, process) which may be added by webpack based pipelines - but it's not secure to rely on that
2. when Babel isn't configured to use babel-plugin-transform-react-jsx plugin, it falls back to it's jsx runtime helper which works only with react.
   See reactjs > Introducing the New JSX Transform

[ljharb]

It’s quite secure to rely on node globals - a node module bundler that does not provide them is broken.

[piotr-cz]

@ljharb
What is the reason to use global.requestIdleCallback instead of window.requestIdleCallback?

[ntucker]

@ljharb
What is the reason to use global.requestIdleCallback instead of window.requestIdleCallback?

node doesn't have window. I believe globalThis is now the canonical way of referring to such things, so perhaps this should change. This would break older integrations however as globalThis is somewhat new.

@piotr-cz can you open a new issue to track these new things? Also I'm a bit confused about which usage of the jsx transform will work with preact. I'm hoping it's the new version as I hope to use that in the future.

[ljharb]

You can use https://npmjs.com/globalThis to maintain support, but indeed, global is the proper thing to use, and webpack 5 has intentionally broken its core use case by not doing this by default.

[ntucker]

@ljharb How might I include the https://www.npmjs.com/package/globalthis shim only for legacy cases, as to not bloat code size?

[ljharb]

I suppose you could do a conditional require, but generally speaking you can't avoid code size increases when maintaining support for older versions of things.

In this case, requestIdleCallback is already a global variable when present, so const rIC = typeof requestIdleCallback === 'function' && requestIdleCallback; would handle it with no direct reference to the global.

[ntucker]

Hmm, does const rIC = typeof requestIdleCallback === 'function' && requestIdleCallback; work in React Native? Trying to figure out why I did it this way

[ljharb]

If it's a global variable there, it should.

The only reason I can think of to use global. is because you ran into the ReferenceError in node, and that's one way to avoid it. The typeof is another.

[ntucker]

Ah, I now realize it's because microsoft/TypeScript#40807. I can just add the libdef myself so this won't be a problem.

[ntucker]

@piotr-cz When using rollup you can define process via https://github.com/coinbase/rest-hooks/blob/master/packages/rest-hooks/rollup.config.js#L44

Though I don't think rollup is intended for actual projects, but just to build libraries.

[piotr-cz]

@ntucker
I'll open a pull request that will address the jsx transforms for preact issue.
If you are interested, I've written an explanation here: https://github.com/piotr-cz/preact-rollup-react-jsx-transforms#components-wrapped-in-vendor-package-component-dont-render

For handling globals, it's fairly easy to replace them as you noted.

Actually I'm using Rollup as a web app bundler for few years.
I guess it's also used for svetle, snowpack and wmr. I never liked webpack to be honest.