Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React Hooks with Typescript via with Babel 7

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:10 (3 by maintainers)

Top GitHub Comments

6reactions

philipp-spiesscommented, Oct 29, 2018

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

2reactions

philipp-spiesscommented, Oct 29, 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!

Top Results From Across the Web

Setup a React App using Webpack, Babel and TypeScript

This article is part of a two part series on how to configure a React app from scratch with Webpack and Babel and...

Working With React Hooks and TypeScript - Toptal

This article will introduce you to hooks in React and demonstrate how you can harness the potential of hooks in a code-complete tutorial....

Setting TypeScript For Modern React Projects Using Webpack

In this tutorial, we will learn what TypeScript is and how to work with it in a React project. By the end, we'll...

babel/preset-react

@babel/preset-react ... This preset always includes the following plugins: ... And with the development option: Classic runtime adds: ... Automatic runtime (since v7....

Using Typescript with Modern React (i.e. Hooks, Context ...

Using Typescript with modern React (i.e. hooks, context, suspense). Learn how to add TypeScript to a create- react -app project as well as ......