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.