Can't use hooks when `react` & `react-dom` are dev dependencies about tsdx HOT 16 CLOSED

I think I found the problem. I was testing it using yarn link and I couldn't get it to work without removing the devDependency. Publishing a package based on 0.5.5 and using that worked fine. Thanks you all!

from tsdx.

This doesn't work if you're trying to deploy the example site to Netlify or something similar. Is there any other way to accomplish this?

from tsdx.

peerdeps in v0.5.5 9f5c6de

from tsdx.

Facing the same problem; I don't think it is caused by tsdx itself - hooks are quite picky when multiple react instances are present - see facebook/react#14257. Tried doing the recommendations from there; Linked the package react using yarn link and added "react": "link:../node_modules/react" to package.json. Did not work for me.

The solution which worked for me:

• remove package.json/tsconfig.json from example
• install parcel as dev dependency in the package root.
• re-point the import in example/index.tsx to 'src/index.tsx`.
• start the example from the root with parcel example/index.html

Probably not perfect, but at least it works quite fast.

from tsdx.

I think the solution I like best now is to use Parcel's alias like so:

  "name": "example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html"
  },
  "dependencies": {
    "react-app-polyfill": "^1.0.0"
  },
  "alias": {
    "react": "../node_modules/react",
    "react-dom": "../node_modules/react-dom"
  },

  "devDependencies": {
    "@types/react": "^16.8.15",
    "@types/react-dom": "^16.8.4",
    "parcel": "^1.12.3",
    "typescript": "^3.4.5"
  }
}```

from tsdx.

made a PR to do just that

from tsdx.

The right solution is to put react and react-dom to peerDependencies + devDependencies (to be able still develop and test library itself) and never in a regular dependencies.

from tsdx.

That doesn't seem to fix it for me. I still get the same error.

from tsdx.

have you tried to drop node_modules and lock files and reinstall deps?
devDeps + peerDeps in a library shouldn't lead to a duplicated react in node_modules.
Use npm ls react or yarn list react to check that you have no duplicates.

from tsdx.

Yes, we should add react to peer deps and dev deps in the template and keep them as regular deps in the example directory. This is how I do it in Formik. IIRC Formik doesn’t place react-dom as a peer dep, only a dev dep, so it can be used with react native.

from tsdx.

Sorry. I did get it work in an CRA-Project with the published package. But creating a project based on 0.5.5, adding a hook, and then trying to use the component in the provided example setup is still not working for me. Am I doing something wrong? Repo: https://github.com/mkaradeniz/tsdx-hooks-problem-example

from tsdx.

Yeah, the "react": "link:../node_modules/react" didn't work for me directly either. Only after installing the dependencies without react & react-dom and then adding "react": "link:../node_modules/react" & "react-dom": "link:../node_modules/react-dom" after installing works. At least as long you don't yarn again.

Thanks for your workaround!

from tsdx.

You don’t need to run yarn link if you build and import from the root

from tsdx.

I had the same issue, @petyosi solution worked for me.

from tsdx.

True

from tsdx.

@mikecousins you can always add a script to install the latest version of your lib

from tsdx.