Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for Next.js 13 with experimental appDir enabled #222

Open
p13lgst opened this issue Feb 4, 2023 · 9 comments
Open

Support for Next.js 13 with experimental appDir enabled #222

p13lgst opened this issue Feb 4, 2023 · 9 comments

Comments

@p13lgst
Copy link

p13lgst commented Feb 4, 2023

As referenced in #194, if the experimental option appDir option is enabled on Next.js, it will break the editor, with the following error:
Screenshot from 2023-02-04 09-07-18

And on the console a lot of warnings including the one referenced on the other issue

If you disable the appDir option, the editor renders without the error

Here's a sandbox with the reproduction: https://codesandbox.io/p/sandbox/festive-dijkstra-z45mi4
@m-Ryan
Copy link
Collaborator

m-Ryan commented Feb 6, 2023

image

Something went wrong.

@p13lgst
Copy link
Author

p13lgst commented Feb 6, 2023

Moved it to a repo: https://github.com/p13lgst/Easy-email-Next-13-appDir-bug

@m-Ryan
Copy link
Collaborator

m-Ryan commented Feb 10, 2023

Sorry, we don't have much time to check this bug at the moment.

@wh5938316
Copy link

Perhaps rendering multiple HTML tags in the same page caused this error, which is not compliant with the standards. Wrapping EditEmailPreview with the react-frame-component package may resolve this issue.

@wh5938316
Copy link

Perhaps rendering multiple HTML tags in the same page caused this error, which is not compliant with the standards. Wrapping EditEmailPreview with the react-frame-component package may resolve this issue.

However, doing this requires passing down the new document and window objects, which might be a bit cumbersome.

@willopez
Copy link
Contributor

willopez commented May 19, 2023 •
edited
Loading

@m-Ryan @p13lgst I am working on making the editor work with Next's new app directory, I removed the html tag(I changed to to <!DOCTYPE html><div></div> from here: https://github.com/zalify/easy-email/blob/27e6fcabe6bbe83b1ba00e19366261371463a98d/packages/easy-email-editor/src/components/UI/SyncScrollIframeComponent/index.tsx#L116

However, I still see the html tag in the preview? I am I editing the correct place?

After much digging, I found the culprit! It's the <mjml> tag that generates the extra <html .. tag. Not sure how to proceed, maybe for previews that wrapper <mjml> can be removed?

@EmileIB
Copy link

EmileIB commented Nov 1, 2023

Perhaps rendering multiple HTML tags in the same page caused this error, which is not compliant with the standards. Wrapping EditEmailPreview with the react-frame-component package may resolve this issue.

However, doing this requires passing down the new document and window objects, which might be a bit cumbersome.

Hello, do you have a working example?

@khalidM3
Copy link

@willopez Did you get it working on next js app dir ? i'm facing the same issue right now. I'd appreciate the help.

@abhijeetahuja
Copy link

Any luck with this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@willopez @abhijeetahuja @wh5938316 @m-Ryan @khalidM3 @p13lgst @EmileIB