Support for React Hooks

[Knaackee]

My GatsbyJS site uses React Hooks (currently in alpha).
Netlify CMS does not support React Hooks at the moment. I am getting

Sorry!
There's been an error - please report it!

Invariant Violation: Minified React error #298; visit https://reactjs.org/docs/error-decoder.html?invariant=298 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Hooks can only be called inside the body of a function component.

Any ideas?

[talves]

Any way you can reproduce with a code example on a test repository?

Since Hooks are still in alpha, it may take a while for review. I'm currently waiting for release before I try to tackle integration, but your example would help also.

[Knaackee]

Sorry for the late reply.
React just released version 16.8 today.
This version contains hooks.

[erquhart]

Yep, stable now. We'll take a PR to upgrade React packages to 16.8.

[talves]

@erquhart do you see the PR being anything other than bumping the versions? I think we should make it a priority.

I will take it.

[erquhart]

Yep just a bump of the react packages.

_{Sent with GitHawk}

[Knaackee]

Should it work now? I just updated the packages but still getting

Hooks can only be called inside the body of a function component.

Is there any release date ?

Thank you very much!

[erquhart]

It's working as of 2.4.1 - that error means you're calling Hooks from somewhere other than the body of a function component.

_{Sent with GitHawk}

[talves]

@Knaackee you are correct. You will not be able to use hooks until we find a solution for using the same instance of react. Reopening the issue.

[Neddz]

I am having the same issue, my component works everywhere and with other libraries except when I use it in the registerPreviewTemplate.

I am getting the same error than the others above:
Hooks can only be called inside the body of a function component.

react 16.8.2
netlify-cms 2.4.2

[talves]

@Neddz Is the component using hooks? If so, it will not work until we find a solution.

[Neddz]

@talves It is, I just wanted to confirm that this is happening to me as well and it is not a problem in the component itself.

[talves]

@erquhart I made a PR of what I am proposing for a fix.

I created #2097 to have netlify-cms-core use react, react-dom as peer dependencies.
There is a proposed new bundle build that will be a manual init build (dist/netlify-cms-manual-init.js) with react and react-dom as an external dependency, so we can import the library into a custom build that can use react hooks and allow for the CMS to use the same instance of react on the CMS as any registered widgets and backends.

I believe this is the correct way to solve this issue. This will allow for projects to continue with hooks and for NetlifyCMS to figure out if it will create a new library for 3.0 and move the build into it's' own library.

Caveat: Automatic init bundle dist/netlify-cms.js will not be able to use widgets that use react-hooks still. That is the side affect of the way the bundle is built and the the way registering widgets and backends currently work.

[talves]

On the netlify-cms-manual-init.js bundle, I would like to take the globals into the CMS global (i.e. CMS.init, CMS.createClass) and leave the createElement on the React global.

@erquhart Any objections?

Esentially, we would have:

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/netlify-cms@latest/dist/netlify-cms-manual-init.js"></script>
  <script>
    var h = React.createElement; // optional until needed
    var createClass = CMS.createClass; // optional until needed
    CMS.init();
  </script>

[erquhart]

So here's my concern: even once Netlify CMS is (eventually) completely decoupled from the SPA distribution package (with the current routing, auto bootstrap, etc), that SPA distro will still be the one most folks use. We need to support React Hooks in a way that can be used in SPA distro, otherwise we're going to end up with a fragmented ecosystem where folks find a widget they want to use, but it's incompatible with their CMS unless they go modular.

Thoughts?

[talves]

Currently no-one can really create an external library (widget, preview, etc) without a duplicate React instance unless they use the createClass global.
Using a global class from a script without using externals will break if someone tries to use hooks in their library and tries to register it into the SPA.

I have spent quite a bit of time on this issue and the only way I can think of doing this is the way I have outlined.

My # PR will not solve this issue, so I am going to close it. It would require a new library bundle and I did not have luck getting it to work inside the monorepo.

[erquhart]

Gotcha - thanks for your effort on this. It will remain a general priority, as shared dependencies are a blocker for a real ecosystem (community widgets, etc).

[talves]

The first step solution is now in PR #2141 and will allow us to have a module bundle that has React and ReactDOM as external peer dependencies.

We will be able to close this issue once that module library is available.

[talves]

Now we will be able to patch the gatsby-plugin-netlify-cms with #2252

Will resolve any issue with using React Hooks in NetlifyCMS for Gatsby and any other custom build solution for that matter.

[leifriksheim]

@talves
I still get this error when using Gatsby. I have updated both the netlify-cms package to the latest beta and the Gatsby plugin. Is this problem not resolved for Gatsby yet?

[talves]

No, the new plugin is not released. They are reviewing it soon.. This is a breaking change and will require the use of netlify-cms-app instead of netlify-cms also.

[karolis-sh]

Upgraded to netlify-cms-app@2.9.1 from netlify-cms@ 2.8.1-beta.1 in my gatsby app, getting some console errors on the edit fields

but nonetheless the update was seamless and hooks are working, thx for the work!

[talves]

@buz-zard that is a known warning. Thanks.

gatsby-plugin-netlify-cms@4.0.0 merged, closing this. See README for update.

Please create a new issue if you find a problem.