stephen Posts

stephen

•Created by stephen on 7/22/2023 in #help

Deno Imports

I'm trying to use react-hook-form in an application, but bringing in the dependency results in a dependencies mismatch it appears. My import map includes the following:

{
  "imports": {
    "react": "https://esm.sh/v119/react@18.2.0",
    "react-dom/client": "https://esm.sh/v119/react-dom@18.2.0/client",
    "react/": "https://esm.sh/v119/react@18.2.0/",
    "react-dom": "https://esm.sh/v119/react-dom@18.2.0",
    "react-hook-form": "https://esm.sh/v119/react-hook-form",
  }
}

{
  "imports": {
    "react": "https://esm.sh/v119/react@18.2.0",
    "react-dom/client": "https://esm.sh/v119/react-dom@18.2.0/client",
    "react/": "https://esm.sh/v119/react@18.2.0/",
    "react-dom": "https://esm.sh/v119/react-dom@18.2.0",
    "react-hook-form": "https://esm.sh/v119/react-hook-form",
  }
}

I then use it like so:

import { useForm, SubmitHandler } from "react-hook-form";
import { ChangeEvent, useReducer } from "react";

function index(){
  const {} = useForm()
  return (/*...*/
}

import { useForm, SubmitHandler } from "react-hook-form";
import { ChangeEvent, useReducer } from "react";

function index(){
  const {} = useForm()
  return (/*...*/
}

When I load this route, however, the application crashes with the following error:

-> GET /invite
TypeError: Cannot read properties of null (reading 'useRef')
    at Object.n.useRef (https://esm.sh/stable/react@18.2.0/denonext/react.mjs:2:6840)
    at tr (https://esm.sh/v129/react-hook-form@7.45.2/denonext/react-hook-form.mjs:2:25512)
    at Index (file:///Users/stephenweiss/code/waves.fm/waves-web/src/routes/invite.tsx:41:7)
    at Qt (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:10961)
    at ot (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:11701)
    at B (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:14116)
    at lt (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:15082)
    at nn (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:14946)
    at B (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:14244)
    at ot (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:13709)

-> GET /invite
TypeError: Cannot read properties of null (reading 'useRef')
    at Object.n.useRef (https://esm.sh/stable/react@18.2.0/denonext/react.mjs:2:6840)
    at tr (https://esm.sh/v129/react-hook-form@7.45.2/denonext/react-hook-form.mjs:2:25512)
    at Index (file:///Users/stephenweiss/code/waves.fm/waves-web/src/routes/invite.tsx:41:7)
    at Qt (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:10961)
    at ot (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:11701)
    at B (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:14116)
    at lt (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:15082)
    at nn (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:14946)
    at B (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:14244)
    at ot (https://esm.sh/v119/react-dom@18.2.0/deno/server.js:8:13709)

I'm pretty new to Deno, so I'm trying to parse this and understand what I should be doing instead.

2 replies