React: React Hooks with Typescript via with Babel 7

Created on 28 Oct 2018 · 10Comments · Source: facebook/react

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.

Discussion

Source

Raathigesh

👍3

Most helpful comment

@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.

philipp-spiess on 29 Oct 2018

👍4 ❤2

All 10 comments

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 https://github.com/reactjs/rfcs/issues/72

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

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

FredyC on 28 Oct 2018

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!

philipp-spiess on 29 Oct 2018

😄1 👍1

boy you good

lvguoying on 29 Oct 2018

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.

Raathigesh on 29 Oct 2018

<!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.

philipp-spiess on 29 Oct 2018

👍4 ❤2

@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

FredyC on 29 Oct 2018

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

Raathigesh on 29 Oct 2018

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

hrgui on 29 Oct 2018

@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.

philipp-spiess on 29 Oct 2018

👍1

ในวันที่ ส. 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:

Reignite

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
https://github.com/facebook/react/issues/14008?email_source=notifications&email_token=AKB7KAZ6J7GXIXJJT7YZXDDPZKRNLA5CNFSM4F7XOOTKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXGTEOI#issuecomment-499987001,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKB7KA2HCUUQ77QJ4TTE3KDPZKRNLANCNFSM4F7XOOTA
.