Bit: Using React Hooks + Typescript

Created on 19 Dec 2019  ·  22Comments  ·  Source: teambit/bit

Description

I'm trying to make a simple bit component that uses React's hooks and Typescript. When I try to make one I get react's Invalid Hook Call Error (https://fb.me/react-invalid-hook-call) on the bit Overview page. I think this points to the error being more than one copy of react and tried to fix this by adding react as a peer dependency by adding this to my package.json:

  "overrides": {
      "*": {
        "dependencies": {
          "react": "-"
        },
        "peerDependencies": {
          "react": "+"
        }
      }
    }

This worked and changed react to a peer dependency, but I'm still getting the error. Here is component I'm working on: https://bit.dev/ofek/catdog/hook-test

I also tried making TS components without hooks and a JS components with hooks and both of those work fine.

Specifications

  • Bit version: 14.7.0
  • Node version: 11.2.0
  • npm / yarn version: 6.4.1
  • Bit compiler (include version): [email protected]
arebuild prioritcritical typbug typhelp wanted
Source
picture AmitFeldman

All 22 comments

@AmitFeldman - this is likely happening because of duplicated react libraries (in the component and in the consuming application). Try following the instructions here: https://docs.bit.dev/docs/react-guidelines#add-react-libraries-as-peer-dependencies-with-relaxed-versions

Tallyb picture Tallyb on 22 Dec 2019

@Tallyb The component is public, you can see there that the dep is configured correctly.

GiladShoham picture GiladShoham on 22 Dec 2019

@Tallyb @GiladShoham Just in case I also tried to add react-dom to the peer dependencies (v0.0.11 of this component: https://bit.dev/ofek/catdog/hook-test) as written in the linked docs. Still doesn't work, anyone have any ideas? I saw that this problem also exists on a bunch of other bit hook+ts components.

AmitFeldman picture AmitFeldman on 22 Dec 2019
👍1

odd. hooks have worked for me without any problems, and when I paste the same code in the playground it works without errors.

looking into this..

KutnerUri picture KutnerUri on 23 Dec 2019

ok no lead so far.
I forked the component to another Collection, and it works out of the box. 🤨
https://bit.dev/kutner/temp/hook-test

I can't see any difference between the components, why is it rendering there?

KutnerUri picture KutnerUri on 23 Dec 2019

ok no lead so far.
I forked the component to another Collection, and it works out of the box. 🤨
https://bit.dev/kutner/temp/hook-test

I can't see any difference between the components, why is it rendering there?

Hi KutnerUri,
can you please provide the package.json file that you created the component.
There is a difrance between the build process of the component.
your component doesn't build all the node module while ours does.

orensj picture orensj on 24 Dec 2019

your component doesn't build all the node module while ours does

huh? this is unexpected!! can you describe it?

For my fork, I only imported hook-test and exported to another scope.
I did it in a new empty bit workspace.

I also made these changes, but they should not make a difference:

  • Added exports for react version (I thought it might be different)
  • Moved @types/react to peer.

here is the diff:

❯ bit diff ofek.catdog/hook-test 0.0.11 0.0.12                      
-----------------------------------------------
showing diff for ofek.catdog/hook-test
-----------------------------------------------
--- src/HookTest/HookTest.tsx (0.0.11)
+++ src/HookTest/HookTest.tsx (0.0.12)
@@ -1,4 +1,8 @@
 import React, {FC, useState} from 'react';
+import ReactDOM from 'react-dom';
+
+export const ReactVersion = React.version;
+export const ReactDomVersion = ReactDOM.version;

 const HookTest: FC<{}> = () => {
     const [count, setCount] = useState(0);
--- Id (0.0.11)
+++ Id (0.0.12)
- [email protected]
+ [email protected]

--- Dependencies (0.0.11)
+++ Dependencies (0.0.12)
- [ @types/react@^16.9.16 ]
+ [  ]

Full package json:

{
  "name": "@bit/kutner.temp.hook-test",
  "version": "0.0.12",
  "homepage": "https://bit.dev/kutner/temp/hook-test",
  "main": "dist/HookTest.js",
  "dependencies": {},
  "devDependencies": {},
  "peerDependencies": {
    "react-dom": "^16.11.0",
    "react": "^16.11.0",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4"
  },
  "license": "SEE LICENSE IN LICENSE",
  "bit": {
    "env": {
      "compiler": {
        "bit.envs/compilers/[email protected]": {
          "rawConfig": {
            "tsconfig": {
              "compilerOptions": {
                "lib": [
                  "dom",
                  "es2015"
                ],
                "jsx": "react"
              },
              "include": [
                "./**/*"
              ]
            },
            "development": false,
            "copyPolicy": {
              "ignorePatterns": [
                "package.json",
                "package-lock.json",
                "tsconfig.json"
              ],
              "disable": false
            },
            "useExperimentalCache": false
          },
          "options": {},
          "files": {}
        }
      }
    },
    "overrides": {
      "dependencies": {
        "react": "-"
      },
      "peerDependencies": {
        "react": "^16.9.0",
        "react-dom": "^16.9.0"
      }
    }
  }
}
KutnerUri picture KutnerUri on 24 Dec 2019

If you look at the console output of the two component, you can see that ours build with all the node module dependenies while yours build your source file only.

orensj picture orensj on 24 Dec 2019

You are correct!
This looks like an isolation problem, happening at authored environment.

@orensj / @AmitFeldman - Try updating compiler to latest version. (3.1.23 -> latest)
@GiladShoham - can you check this is not a regression of Bit 14.7.1?

forked:

 ____  _ _     _ _  _   _____ _ 
| __ )(_) |_  / | || | |___  / |
|  _ \| | __| | | || |_   / /| |
| |_) | | |_  | |__   _| / /_| |
|____/|_|\__| |_|  |_|(_)_/(_)_|


built Files:
src/HookTest/HookTest.d.ts
src/HookTest/HookTest.js

Original

___  _ _     _ _  _   _____ _ 
| __ )(_) |_  / | || | |___  / |
|  _ \| | __| | | || |_   / /| |
| |_) | | |_  | |__   _| / /_| |
|____/|_|\__| |_|  |_|(_)_/(_)_|


built Files:
HookTest.d.ts
HookTest.js
node_modules/csstype/index.d.ts
node_modules/csstype/index.js.flow
node_modules/csstype/LICENSE
node_modules/csstype/README.md
node_modules/js-tokens/CHANGELOG.md
node_modules/js-tokens/index.js
...
KutnerUri picture KutnerUri on 24 Dec 2019

@orensj nice catch.
I'm not sure yet why exactly this happened.
it looks like some isolation issue.
I remember saw something similar a few weeks ago, but we fixed it.
which OS did you use for tagging the component?
can you try tagging the component again (use --force if the component is not modified - bit tag -f hook-test)
then run
bit cat-component ofek.catdog/[email protected] (put here the new version number)
and see under the dists key if it contains the node_modules files.
If they are not there, everything should work as expected.
I'll continue to investigate how it happened but right now I can't reproduce it.
If it happens again, please let us know so we can gather more info.

GiladShoham picture GiladShoham on 25 Dec 2019

@GiladShoham
Hi we work with windows 10 machine.
I tried to do what you ask and still with no success (node module is produce).
I tried the same thing on Ubuntu (not sure what version) and it work fine.
Hope that will help you focus on the problem.

orensj picture orensj on 25 Dec 2019

Yes, that helps a lot!
I'll try to test it on windows as well.
Thanks.

@davidfirst @qballer
We should check if it's a compiler issue or a bit issue.
It happens on windows only.

GiladShoham picture GiladShoham on 25 Dec 2019

@GiladShoham , the Typescript compiler had this exact issue on Windows. It was saving the node_modules into the dists. It has been fixed a few months ago, so the latest version should be fine.
I'd suggest building with --no-cache or making a change in the component and trying again. (after upgrading the compiler to the latest version of course).

davidfirst picture davidfirst on 25 Dec 2019

@davidfirst Thanks.
I remember I saw it somewhere.
@orensj Can you please check the same process with the latest compiler version?

GiladShoham picture GiladShoham on 25 Dec 2019

I upgrade the react-typescript compiler to 3.1.26 and use --no-cache build option, and that didn't fix the problem.

orensj picture orensj on 26 Dec 2019

@orensj Thanks for the update.
we will check it
@qballer @davidfirst let's check if it's a bit issue or a compiler issue.

GiladShoham picture GiladShoham on 26 Dec 2019

@orensj , are you sure you're the latest compiler version is attached to the component in question?
Please try to run bit show <component-id> and make sure the compiler version is 3.1.26.
Keep in mind that the fact you updated your workspace with this version, doesn't mean that this component has updated as well. In case you imported the component, you'll have to update the compiler version from the package.json of the component.

I'd be happy to try myself, but I got a bit lost in the thread. Are we talking about the same component in the description (https://bit.dev/ofek/catdog/hook-test)?

davidfirst picture davidfirst on 26 Dec 2019

@davidfirst I updated https://bit.dev/ofek/catdog/hook-test?version=0.0.13 with the latest version of the compiler which right now is 3.1.27 and it still doesn't work.

AmitFeldman picture AmitFeldman on 26 Dec 2019

@qballer , I don't get it, the same Windows bug is still there. Please check the latest react-typescript compiler (3.1.27).
I see this line: const defaultIgnore = ['node_modules/', FIXED_OUT_DIR, '.dependencies', '.ts']; in ts_compiler/src/compile.ts file.
(the fix was changing node_modules/ to node_modules${path.sep})

davidfirst picture davidfirst on 26 Dec 2019

Hey guys - react-typescript 3.1.28 should solve it (assuming the node_modules/ is the issue).

@davidfirst I have no idea why it's not there. The fix is I believe to run tests on windows/mac as well. Lets discuss this off issue.

if OP can confirm that it solves the issue it would be great.

qballer picture qballer on 29 Dec 2019
🎉1

@qballer Just updated the component to work with 3.1.28. https://bit.dev/ofek/catdog/hook-test?version=0.0.14 Looks like it works, thanks!

AmitFeldman picture AmitFeldman on 29 Dec 2019

no problem.

qballer picture qballer on 30 Dec 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nvthuong1996 picture nvthuong1996  ·  13Comments
itaymendel picture itaymendel  ·  16Comments
poriaz picture poriaz  ·  15Comments
yairEO picture yairEO  ·  19Comments
AlexanderKaran picture AlexanderKaran  ·  22Comments