How do you run this locally inside a NextJs/React app ? keep getting usestate error in development (`npm link` only, not when published)

darwin808 commented 2 years ago

Current Behavior

I keep getting this error in development only (when using yarn link), but in production (when published) everything is ok

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'useState')

Expected behavior

it should work no problems like it does in production

Step to reproduce

create a blank react app
create a blank tsdx app
create a functional component in tsdx and use a hook example useState
run yarn build in tsdx folder
run yarn link in tsdx folder
on your react app >> run yarn link "The Name of your tsdx library which you link"
on your react app >> import a component from tsdx
on your react app >> run yarn start
blank page? check console log

Your environment

  System:
    OS: Linux 5.17 Arch Linux
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 3.56 GB / 15.47 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Brave Browser: 100.1.37.109
    Firefox: 99.0.1

-->

darwin808 commented 2 years ago

@agilgur5 added steps to reproduce

OlegWock commented 2 years ago

I just stumbled across this issue while googling same problem for other library. No idea why this is happening, but if you include your lib as file dependency in package.json it works. (And maybe you'll need to remove react from dev deps of your library)

  "dependencies": {
    "react-local-toast": "file:../../react-local-toast"
  },

My guess is:

Since you have react in dev deps of your library (probably), your library uses their installation of react, instead of one from parent project. For some reason Next shows only Cannot read properties of null (reading 'useState') but if you check console, there will be probably error saying that you did something wrong with hooks, and maybe you have two different react running.

I couldn't get it working with link unfortunately. Even if I remove react from node_modules of lib, I get different error. Switching to file dependency solved this problem

aafnnp commented 1 year ago

I just stumbled across this issue while googling same problem for other library. No idea why this is happening, but if you include your lib as file dependency in package.json it works. (And maybe you'll need to remove react from dev deps of your library)
  "dependencies": {
    "react-local-toast": "file:../../react-local-toast"
  },
My guess is:

Since you have react in dev deps of your library (probably), your library uses their installation of react, instead of one from parent project. For some reason Next shows only Cannot read properties of null (reading 'useState') but if you check console, there will be probably error saying that you did something wrong with hooks, and maybe you have two different react running.

I couldn't get it working with link unfortunately. Even if I remove react from node_modules of lib, I get different error. Switching to file dependency solved this problem

Cannot read properties of null (reading 'useState') It bothered me for many days and this method worked

nmgix commented 1 year ago

Also use `npm link` with url to react used in other library

The one thing that helped me: https://stackoverflow.com/questions/56663785/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com

pwaterz commented 1 year ago

I was able to solve this by hard coding the path to react and react dom in webpack via next.config.js

  const nextConfig = {    
    webpack: (config, { dev }) => {  
      config.resolve.alias = {
        ...config.resolve.alias,
        ...(dev && {
          react: `${config.context}/node_modules/react`,
          "react-dom": `${config.context}/node_modules/react-dom`,
        }),
    };

    return config;
  }
};

OscarJVD commented 1 year ago

THE DEFINITIVE SOLUTION TO THIS PROBLEM IS THIS -> https://iws.io/2022/invalid-hook-multiple-react-instances

jaredpalmer / tsdx