Nextjs useForm gives a type error #470

samyarkd · 2023-10-02T11:31:28Z

Describe the bug

When i use useForm i get an error saying use_isomorphic_layout_effect_cjs is not a function. and it's due to Nextjs server side rendering.

Right now I'm getting over it using Nextjs dynamic import and disabling ssr but it's not a good approach.

when i want to use useForm hook i get the bellow error:

TypeError: use_isomorphic_layout_effect_cjs is not a function
    at useForm (/home/challen-quiz/dist/apps/challenquiz/.next/server/chunks/9063.js:828:3)
    at QuestionForm (/home/challen-quiz/dist/apps/challenquiz/.next/server/app/admin/add-question/page.js:442:44)
    at nP (/home/challen-quiz/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:45:40134)
    at nP (/home/challen-quiz/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:45:53256)
    at n$ (/home/challen-quiz/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:45:56848)
    at nj (/home/challen-quiz/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:45:60443)
    at nR (/home/challen-quiz/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:45:59154)
    at n$ (/home/challen-quiz/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:45:57094)
    at nj (/home/challen-quiz/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:45:60443)
    at nP (/home/challen-quiz/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:45:50666)

Your minimal, reproducible example

https://stackblitz.com/edit/stackblitz-starters-bbkdbd?file=components%2Fform.tsx

Steps to reproduce

create a new nextjs app project
create a client component
import useForm
use the client compoent
check the logs

Expected behavior

i expected that the useForm would work in a client component

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS Linux fedora
Browzer: Edge
Node version: 20
Nextjs: 13.5.3
@tanstack/react-form": "^0.3.6

Tanstack Form adapter

react-form

TanStack Form version

0.3.6

TypeScript version

5.2.2

Additional context

I just googled something and i found this: https://stackoverflow.com/questions/76609948/error-typeerror-0-useisomorphiclayouteffect-useisomorphiclayouteffect-is-n

The text was updated successfully, but these errors were encountered:

crutchcorn · 2023-10-02T14:54:31Z

This is a known issue caused by our bundler having issues.

Note to self: figure out why TSUp isn't bundling deps properly.

natedunn · 2023-10-09T01:27:30Z

While certainly the error message is not ideal, does this actually cause any breaking issues? The hook seems to work as intended otherwise. 🤔

samyarkd · 2023-10-09T07:40:15Z

While certainly the error message is not ideal, does this actually cause any breaking issues? The hook seems to work as intended otherwise. 🤔

Can't run build command

natedunn · 2023-10-09T16:24:54Z

FWIW, It seems I can still build my project without error.

But i still get this error when running dev:

 ⨯ node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@tanstack/react-form/build/modern/useForm.js (29:2) @ useForm
 ⨯ TypeError: use_isomorphic_layout_effect__WEBPACK_IMPORTED_MODULE_1__ is not a function
    at SettingsForm (settings/_components/SettingsForm.tsx:64:80)

DanielBiegler · 2023-10-23T08:26:17Z

While certainly the error message is not ideal, does this actually cause any breaking issues? The hook seems to work as intended otherwise. 🤔

Cant build the project for both dev and prod environment. (Nextjs Pages Router)

react-form 0.3.6
Nextjs 13.4.8
Node 18
Typescript 4.9.5

Here are some logs for ya:

Prod

Error occurred prerendering page "/en/us/login". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: useIsomorphicLayoutEffect is not a function
    at useForm (file:///<REDACTED>/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@tanstack/react-form/build/modern/useForm.js:29:3)
    at Login (/<REDACTED>/.next/server/pages/[channel]/login.js:139:79)
    at Wc (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
    at Z (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)

Dev:

- error Error [TypeError]: useIsomorphicLayoutEffect is not a function
    at useForm (file:///<REDACTED>/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@tanstack/react-form/build/modern/useForm.js:29:3)
    at Login (webpack-internal:///./components/login.tsx:21:79)
    at renderWithHooks (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
...
omitted a million more lines
...
    at renderNodeDestructiveImpl (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/<REDACTED>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) {
  digest: undefined
}

juliendelort · 2023-10-24T18:53:29Z

I've reproduced this locally and it might be an issue inside the use-isomorphic-layout-effect package:

If I add console.log(useIsomorphicLayoutEffect) inside useForm and run it in a nextjs app I get:
- { default: [Function (anonymous)] } in the back end
- and useLayoutEffect(create, deps) { ... } in the front end
So there is an extra default property in the back end.
Looking inside the Next.js build folder, I see that use_isomorphic_layout_effect is imported from node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.cjs.js on the server and from node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js on the client. So Next.js imports the CJS version for SSR and the ESM version in the front end.

So for some reason, NextJS gets the CJS version on the server instead of the ESM one, and it can't resolve the default export properly. I don't know if it's an issue with NextJS or the package itself but I've noticed that if I add the exports sections to use-isomorphic-layout-effect's package.json, like below:

"exports": {
    "require": {
      "default": "./dist/use-isomorphic-layout-effect.cjs.js"
    },
    "import": {
      "default": "./dist/use-isomorphic-layout-effect.esm.js"
    }
  }

the issue disappears.

That said, we probably don't need to use this package. Looking at the code here, all it does is:

export default typeof document !== 'undefined' ? useLayoutEffect : useEffect;

I've tried replacing the package with that code inside the react-form package and it solved the issue. I'll open a PR.

crutchcorn · 2023-10-24T18:56:39Z

@juliendelort this is good investigation. I will know however that I use this package simply because of React Native support.

But admittedly that's changed since RN now supports import maps

juliendelort · 2023-10-24T19:47:39Z

Ah yeah true, I forgot about react-native. I wonder if typeof document !== 'undefined' would work on RN and default back to useEffect.

samyarkd · 2023-10-25T09:16:46Z

I've reproduced this locally and it might be an issue inside the use-isomorphic-layout-effect package:

If I add console.log(useIsomorphicLayoutEffect) inside useForm and run it in a nextjs app I get:

{ default: [Function (anonymous)] } in the back end

and useLayoutEffect(create, deps) { ... } in the front end

So there is an extra default property in the back end.

Looking inside the Next.js build folder, I see that use_isomorphic_layout_effect is imported from node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.cjs.js on the server and from node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js on the client. So Next.js imports the CJS version for SSR and the ESM version in the front end.

So for some reason, NextJS gets the CJS version on the server instead of the ESM one, and it can't resolve the default export properly. I don't know if it's an issue with NextJS or the package itself but I've noticed that if I add the exports sections to use-isomorphic-layout-effect's package.json, like below:
"exports": {
    "require": {
      "default": "./dist/use-isomorphic-layout-effect.cjs.js"
    },
    "import": {
      "default": "./dist/use-isomorphic-layout-effect.esm.js"
    }
  }
the issue disappears.

That said, we probably don't need to use this package. Looking at the code here, all it does is:
export default typeof document !== 'undefined' ? useLayoutEffect : useEffect;
I've tried replacing the package with that code inside the react-form package and it solved the issue. I'll open a PR.

i have the exact same thoughts about it, as you mentioned it, all does is only a one line of code

crutchcorn · 2023-10-30T07:51:44Z

This fix made it into our 0.6.1 release with the help of @juliendelort. Please let me know if you run into any further issues with Next.js support

Sorry for the headache y'all - I really don't know how I got it in my head that React Native wouldn't support this, seeing as I already knew it did from my time building HouseForm.

crutchcorn mentioned this issue Oct 18, 2023

[Tracking] SSR & RSC Usage #480

Closed

crutchcorn added the bug label Oct 18, 2023

juliendelort mentioned this issue Oct 24, 2023

fix: remove use-isomorphic-layout-effect package for nextjs compatibility #485

Merged

crutchcorn closed this as completed Oct 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nextjs useForm gives a type error #470

Nextjs useForm gives a type error #470

samyarkd commented Oct 2, 2023 •

edited

Loading

crutchcorn commented Oct 2, 2023

natedunn commented Oct 9, 2023

samyarkd commented Oct 9, 2023

natedunn commented Oct 9, 2023 •

edited

Loading

DanielBiegler commented Oct 23, 2023

juliendelort commented Oct 24, 2023

crutchcorn commented Oct 24, 2023

juliendelort commented Oct 24, 2023

samyarkd commented Oct 25, 2023

crutchcorn commented Oct 30, 2023

Nextjs useForm gives a type error #470

Nextjs useForm gives a type error #470

Comments

samyarkd commented Oct 2, 2023 • edited Loading

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

Tanstack Form adapter

TanStack Form version

TypeScript version

Additional context

crutchcorn commented Oct 2, 2023

natedunn commented Oct 9, 2023

samyarkd commented Oct 9, 2023

natedunn commented Oct 9, 2023 • edited Loading

DanielBiegler commented Oct 23, 2023

Prod

Dev:

juliendelort commented Oct 24, 2023

crutchcorn commented Oct 24, 2023

juliendelort commented Oct 24, 2023

samyarkd commented Oct 25, 2023

crutchcorn commented Oct 30, 2023

samyarkd commented Oct 2, 2023 •

edited

Loading

natedunn commented Oct 9, 2023 •

edited

Loading