React Hooks with Typescript via with Babel 7 #14008

Raathigesh · 2018-10-28T09:14:46Z

Do you want to request a feature or report a bug?
Question/Bug

What is the current behavior?

I'm trying to use hooks with a typescript project which uses babel 7 but I'm getting the error Uncaught Error: Hooks can only be called inside the body of a function component.

I guess I'm missing something trivial here but I couldn't figure out what it is. A minimal reproduction of the issue is available at https://github.com/Raathigesh/react-hooks-typescript-with-babel-issue

import React, { useState } from "react";
import ReactDOM from "react-dom";

function Hello() {
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  return <div>Hello</div>;
}

ReactDOM.render(<Hello />, document.getElementById("root"));

Any pointers would be helpful.

danielkcz · 2018-10-28T16:22:03Z

Strangely I came up with a similar problem for a custom hook trying to wrap the context so I don't need to export whole Context object. It's a bit related to reactjs/rfcs#72

export function useRoot() {
  return useContext(RootContext)
}

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

philipp-spiess · 2018-10-29T09:13:45Z

Hey 👋

Can you test if you're running two different instances of react (Someone else also run into this issue at #13991)?

Otherwise a reproduction case would be ideal - Either a small CodeSandbox example or a GitHub repo that we can install and run locally. Your code snippets look alright so I'd like to verify tooling firsts. Thanks for your help!

lvguoying · 2018-10-29T09:17:59Z

boy you good

Raathigesh · 2018-10-29T09:35:53Z

Hey @philipp-spiess,

I don't think I'm running two different versions of react though.

A reproduction case is available at https://github.com/Raathigesh/react-hooks-typescript-with-babel-issue

Thank you for looking into it.

philipp-spiess · 2018-10-29T10:02:46Z

@Raathigesh Thanks! This is indeed a tooling issue and I think it's caused by html-webpack-template. If you take a look at the generated HTML, the main JS entry-point is added twice causing two React versions to be loaded:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <title>Reignite</title>
  </head>
  <body>
    <div id="root">
    </div>
    <script src="ui.bundle.js" type="text/javascript"></script>
  <script type="text/javascript" src="ui.bundle.js"></script></body>
</html>

If you remove this package (and make sure you still have a mounting point for React), everything works as expected: https://github.com/Raathigesh/react-hooks-typescript-with-babel-issue/pull/1

I recommend you file an upstream issue report with the html-webpack-template maintainers to fix this.

danielkcz · 2018-10-29T10:04:27Z

@philipp-spiess I've discovered culprit in my case ... it's observer HOC from MobX

https://codesandbox.io/s/vjy5j1xx93

Not sure what is going on there, because regular HOC works just fine as you can see there. I am thinking if I should file a new issue here (obviously it's unrelated to this one) or rather try to solve in on MobX side. Suggestions?

Edit: created issue on MobX side

Raathigesh · 2018-10-29T10:27:28Z

@philipp-spiess Oh right! Thank you so much for looking into this.

hrgui · 2018-10-29T15:39:09Z

Not sure what is going on there, because regular HOC works just fine as you can see there. I am thinking if I should file a new issue here (obviously it's unrelated to this one) or rather try to solve in on MobX side. Suggestions?

I think Hooks don't work with components that are wrapped with HOCs, since HOCs most often wrap functional components with a class component.

Example: https://codesandbox.io/s/mm47kpqnq9 <- just click the button to crash the page.

observer from mobx-react seems like it's wrapping the functional component in a class component according to https://github.com/mobxjs/mobx-react/blob/master/src/observer.js#L330-L344

philipp-spiess · 2018-10-29T15:50:29Z

@FredyC Got it! I saw you already filed an upstream issue - I think this needs to be resolved on the MobX side.

@hrgui In your example you're trying to use a React Hook in a Class Component which is not supported as the warning already indicates. The implementation would clash with setState in classes.

I think this resolves all issues in this ticket. I'm going to close it but if you find a bug feel free to open a new ticket and include a reproduction case.

526117 · 2019-06-08T04:06:20Z

ในวันที่ ส. 8 มิ.ย. 2019 01:22 น. godwinkoroh <notifications@github.com> เขียนว่า:

…

@Raathigesh <https://github.com/Raathigesh> Thanks! This is indeed a tooling issue and I think it's caused by html-webpack-template. If you take a look at the generated HTML, the main JS entry-point is added twice causing two React versions to be loaded: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="ie=edge" http-equiv="x-ua-compatible"> <title>Reignite</title> </head> <body> <div id="root"> </div> <script src="ui.bundle.js" type="text/javascript"></script> <script type="text/javascript" src="ui.bundle.js"></script></body> </html> If you remove this package (and make sure you still have a mounting point for React), everything works as expected: https://github.com/Raathigesh/react-hooks-typescript-with-babel-issue/pull/1 I recommend you file an upstream issue report with the html-webpack-template maintainers to fix this. Thanks, it welcome well for me. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#14008?email_source=notifications&email_token=AKB7KAZ6J7GXIXJJT7YZXDDPZKRNLA5CNFSM4F7XOOTKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXGTEOI#issuecomment-499987001>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKB7KA2HCUUQ77QJ4TTE3KDPZKRNLANCNFSM4F7XOOTA> .

philipp-spiess added the Type: Discussion label Oct 29, 2018

philipp-spiess closed this as completed Oct 29, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Hooks with Typescript via with Babel 7 #14008

React Hooks with Typescript via with Babel 7 #14008

Raathigesh commented Oct 28, 2018

danielkcz commented Oct 28, 2018 •

edited

Loading

philipp-spiess commented Oct 29, 2018

lvguoying commented Oct 29, 2018

Raathigesh commented Oct 29, 2018

philipp-spiess commented Oct 29, 2018

danielkcz commented Oct 29, 2018 •

edited

Loading

Raathigesh commented Oct 29, 2018

hrgui commented Oct 29, 2018 •

edited

Loading

philipp-spiess commented Oct 29, 2018

526117 commented Jun 8, 2019 via email

React Hooks with Typescript via with Babel 7 #14008

React Hooks with Typescript via with Babel 7 #14008

Comments

Raathigesh commented Oct 28, 2018

danielkcz commented Oct 28, 2018 • edited Loading

philipp-spiess commented Oct 29, 2018

lvguoying commented Oct 29, 2018

Raathigesh commented Oct 29, 2018

philipp-spiess commented Oct 29, 2018

danielkcz commented Oct 29, 2018 • edited Loading

Raathigesh commented Oct 29, 2018

hrgui commented Oct 29, 2018 • edited Loading

philipp-spiess commented Oct 29, 2018

526117 commented Jun 8, 2019 via email

danielkcz commented Oct 28, 2018 •

edited

Loading

danielkcz commented Oct 29, 2018 •

edited

Loading

hrgui commented Oct 29, 2018 •

edited

Loading