Cannot call `useEffect` in preview component

Describe the bug I wish to be able to call useEffect in my code, particularly in the preview ./emails/previews/Foo.tsx component. I’m not able though - I’m getting this error:

@org/mailing:dev: error - ../../../node_modules/react/cjs/react.development.js (1634:0) @ useEffect
@org/mailing:dev: error - TypeError: Cannot read properties of null (reading 'useEffect')
@org/mailing:dev:     at useEffect (webpack-internal:///../../../node_modules/react/cjs/react.development.js:1635:21)
@org/mailing:dev:     at Object.Preview (webpack-internal:///./src/moduleManifest.js:663:76)
@org/mailing:dev:     at getPreviewComponent (webpack-internal:///./src/util/moduleManifestUtil.ts:24:43)
@org/mailing:dev:     at getStaticProps (webpack-internal:///./src/pages/previews/[[...path]].tsx:53:104)
@org/mailing:dev:     at Object.renderToHTML (/Volumes/Dev/repos/org-frontend-monorepo/node_modules/next/server/render.tsx:749:20)
@org/mailing:dev:     at runMicrotasks (<anonymous>)
@org/mailing:dev:     at processTicksAndRejections (node:internal/process/task_queues:96:5)
@org/mailing:dev:     at doRender (/Volumes/Dev/repos/org-frontend-monorepo/node_modules/next/server/base-server.ts:1288:30)
@org/mailing:dev:     at cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/Volumes/Dev/repos/org-frontend-monorepo/node_modules/next/server/base-server.ts:1429:24)
@org/mailing:dev:     at /Volumes/Dev/repos/org-frontend-monorepo/node_modules/next/server/response-cache/index.ts:117:28 {
@org/mailing:dev:   page: '/previews/[[...path]]'
@org/mailing:dev: }

To Reproduce Steps to reproduce the behavior:

1. Create a preview component for a template
2. Add import { useEffect } from 'react';
3. Call

useEffect(() => {
    console.log(1);
  }, []);

within preview component’s body 4. Crash

Expected behavior Calling hooks should be allowed.

Desktop (please complete the following information):

• OS: [e.g. iOS] macos@12.5.1
• Browser [e.g. chrome, safari] irrelevant but Chrome@106.0.5249.119
• Version [e.g. 22] 0.8.7

[psugihara]

Oh, that’s a neat use-case I’ve never thought of.

I don’t think there’s a way to accomplish this currently, but we’ve had a few requests for being able to edit props in the GUI and I’d like to support it.

For your use-case it sounds like we need…

1. an easy way to edit props in the GUI
2. a way to do something with those props before rendering

Feature 1 needs some design (@monicakogler ❤️) but we should just do it.

Hooks would be a nice way to do (2) but I’m a bit scared of mucking with mjml-react. It looks like this person got it to work but I kind of want the rendered email to use the exact html we’re sending.

Another possibility for (2) would be to allow for async preview functions and let you edit the arguments of the preview functions via the GUI. This might be nice because you could control which fields are editable and we could generate input UI based on types.

export async function offerBlast(reservationId: string) {

  const response = await fetch(`https://bookbook.com/api/reservation/${reservationId}`);
  const reservation = await response.json();

  return (
    <Offer
      reservation={reservation}
    />
  );
}

One more thought…

URL character limit

https://github.com/sofn-xyz/mailing/issues/136 would solve and I’m happy to prioritize if you want to go that route instead. It’s p2 right now because I don’t think anyone uses it really 😃. I agree this is not the user friendly direction.

[klapec]

@alexfarrill I can confirm your change works as expected. Thank you for the blazing fast🚀 response! 🙂