Using React Hooks + Typescript

[AmitFeldman]

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): react-typescript@3.1.21

[Tallyb]

@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

[GiladShoham]

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

[AmitFeldman]

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

[KutnerUri]

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]

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?

[orensj]

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.

[KutnerUri]

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)
- hook-test@0.0.11
+ hook-test@0.0.12

--- 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/react-typescript@3.1.23": {
          "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"
      }
    }
  }
}

[orensj]

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.

[KutnerUri]

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

[GiladShoham]

@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/hook-test@0.0.12 (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.

[orensj]

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

[GiladShoham]

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.

[davidfirst]

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

[GiladShoham]

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

[orensj]

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

[GiladShoham]

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

[davidfirst]

@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)?

[AmitFeldman]

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

[davidfirst]

@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})

[qballer]

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.

[AmitFeldman]

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

[qballer]

no problem.