useContext does not work

[maxsalven]

Describe the bug useContext throws an error

To Reproduce Steps to reproduce the behavior:

import React, { createContext, useContext } from "react";
import { Mjml, MjmlBody, MjmlColumn, MjmlSection, MjmlText } from "mjml-react";

const Context = createContext("test");

const Example = () => {
  const value = useContext(Context);
  return (
    <Mjml>
      <MjmlBody>
        <MjmlSection>
          <MjmlColumn>
            <MjmlText>{value}</MjmlText>
          </MjmlColumn>
        </MjmlSection>
      </MjmlBody>
    </Mjml>
  );
};

export default Example;

Expected behavior An email with the content "test" should render

Screenshots

Desktop (please complete the following information):

• OS: macOS 12
• Browser Safari
• Version 16

[maxsalven]

If any of the maintainers think this would be reasonably straight forward to fix (cf requiring a major rearchitecture), then I'm happy to dive in and attempt a PR.

[timomeh]

As a workaround, you can use a different context-like Library (like Jotai or other libraries which don't rely on React.Context).

I think React's native context doesn't work here because, in the preview server, React is inlined inside the bundle. But when writing import { createContext } from 'react', it doesn't use the same inlined version. React is then complaining about different instances of React being used.

This only affects the preview server. Sending mails with context works fine.

[maxsalven]

Thanks @timomeh. I haven't tried Jotai v2, but FYI v1 relied on Context and had the same issues.

[timomeh]

I'm using this with Jotai 1.10 and it successfully reads values from context, both in the preview as well as inside sendEmail()

[maxsalven]

Ah great, I must have made a mistake. Will take another look. Thank you.