Closed max8hine closed 6 years ago
Hey there! I was writing a response to your comment yesterday, but I see you edited it.
- seems there is an error in docs
The second example is right—I'll get that fixed. renderToString()
creates the HTML of the email, and then inky()
wraps that HTML in the required boilerplate.
I run node-sass to compile scss to css but not able to find the place to add the compiled css
I'm looking into making some changes to this library soon, and this is something I'd like to address. Certain parts of the wrapper HTML are essential, but it should be easier to edit all the stuff in <head>
.
Your initial issue was asking about how inlining would work, and if you're interested in seeing an example of what the general steps are, I wrote a library that does it called scow. The readme for that library includes a list of steps. However, it only works on .html
files that are already in the filesystem, so it might not work for your use case.
Something you could do in the mean time is look at the code used on the foundation-emails-template. This is more or less the boilerplate react-inky uses. You could use this instead of the inky()
function, and change the HTML how you'd like.
Thanks for using react-inky! :)
Here's my idea for how an editable layout would work: #13
I was editing my question actually twice yesterday, My initial question was vague, sorry for I opened an issue without thinking well.
The idea for #13 looks simple and solid. look forward to the change.
scow looks awesome and useful. I will try scow when I work on the Mailchimp.
Oh, based on my understanding
All the HTML tags will be written in React Component, including <html/>
but except the doctype
?
If it is true, it will benefit the person who also uses facebook/express-react-views as Express's view engine in the node.js project.
which the library uses renderToString
API to render HTML internally and add <!DOCTYPE html>
on top during the rendering process by default.
In this way, the renderToString(inky(template))
in setup.md will be the correct one in the future.
Hey, I did it! You can run npm install gakimball/react-inky#0.3
to try it out. The documentation for it is here.
Amazing! that's fast!! gonna try it now =)👍
I also just published a proper npm version under a next
tag: npm install react-inky@next
. I forgot that installing directly from GitHub won't quite work, because you don't get the compiled JavaScript.
It also requires React 16.2 or higher.
Installed and works well in front-end!
The following link is my setup about how to run this lib in create-react-app for developing. Just put here for someone might need. react-inky-example
But this approach seems to have some issues with server-side rendering.
I tried to use new <Inky/>
components as regular HOC to replace my raw HTML-React-Tag but running into an error and the error info didn't really help.
// emails/forgotten-password.jsx
const email = (props) => (
<Inky>
<Inky.Head>
<link rel="stylesheet" href="style.css" />
<title>{props.subject}</title>
</Inky.Head>
<Inky.Body preview="Preview text">
<EmailTemplate name="Inky" />
</Inky.Body>
</Inky>
)
app.render('emails/forgotten-password')
If <Inky />
works just like regular HOC, I will try it out another day in a sandbox.
What was the error?
One thing to note is that <Inky />
creates a full HTML document, including the top-level <html>
tag, so whatever template you drop the code into should just have a doctype and nothing else.
Sorry to get back late.
I think <Inky>
doesn't take children props.
<Inky>
<Inky.Head>
<link rel="stylesheet" href="/styles/emails/index.css"/>
</Inky.Head>
<Inky.Body>
<Email /> // Sometimes Ok.
</Inky.Body>
</Inky>
<Inky>
<Inky.Head>
<link rel="stylesheet" href="/styles/emails/index.css"/>
</Inky.Head>
<Inky.Body>
{this.props.children} // Error
</Inky.Body>
</Inky>
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
at invariant (/Users/maxshine/Documents/workspace/express-react-email/node_modules/fbjs/lib/invariant.js:42:15)
at ReactDOMServerRenderer.render (/Users/maxshine/Documents/workspace/express-react-email/node_modules/react-dom/cjs/react-dom-server.node.development.js:2477:7)
at ReactDOMServerRenderer.read (/Users/maxshine/Documents/workspace/express-react-email/node_modules/react-dom/cjs/react-dom-server.node.development.js:2307:19)
at Object.renderToStaticMarkup (/Users/maxshine/Documents/workspace/express-react-email/node_modules/react-dom/cjs/react-dom-server.node.development.js:2690:25)
at View.renderFile [as engine] (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express-react-views/index.js:68:32)
at View.render (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express/lib/view.js:135:8)
at tryRender (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express/lib/application.js:640:10)
at Function.render (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express/lib/application.js:592:3)
at ServerResponse.render (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express/lib/response.js:1008:7)
at module.exports (/Users/maxshine/Documents/workspace/express-react-email/routes/actions/home.js:52:14)
I extracted the email part code from my codebase below: https://github.com/max8hine/express-react-email
However, the old, raw foundation-email-template works same and well.
I would double-check whatever this.props.children
is by logging it to the console. It sounds like whatever you're putting inside <Inky.Body />
isn't a React component.
Also, I'd recommend getting rid of this <div>
in your Express code, because it might mess up the layout on some email clients.
The <div>
I put there, was just to try render it individually to see did the code work or not.
It was wrapped by <Layout>
component, which is <Inky>
component, I was using Inky as a HOC.
I don't know <div>
will mess up the layout in some email clients. I will keep that in mind, thank you for point it out =)
Were you able to figure anything else out? I'm fairly certain that the issue is not with the <Inky>
components not passing children—you can see in the code here that's all they do.
I'd recommend using console.log
on all three of the HTML components: Inky
, Inky.Head
, and Inky.Body
. Make sure they're all functions, which means they're being imported correctly. It could be some weird import/export issue. If those are all working, then make sure whatever you're passing into the Inky components is also a function. The error message you posted said that an object was used as a React component instead of a function.
Closing due to inactivity. If you ever want to revisit this, let me know! 👌
3 questions about this library, but more related to implementation question.
1. How to put tag with css into the header section and does this library needs to add foundation-email to work?
I run node-sass to compile scss to css but not able to find the place to add the compiled css
2. seems there is an error in docs At the button of setup.md,
3. how to run it in create-react-app