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

Errors when launching project #16

Closed
easyvico opened this issue Jan 29, 2019 · 38 comments
Closed

Errors when launching project #16

easyvico opened this issue Jan 29, 2019 · 38 comments
Labels
question Further information is requested

Comments

@easyvico
Copy link

easyvico commented Jan 29, 2019 •
edited
Loading

Hi all,
When i try to install npm install react react-dom mjml mjml-react i get this message errors:
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "mjml-react" under a package
npm ERR! also called "mjml-react". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/laurent/.npm/_logs/2019-01-29T10_59_28_382Z-debug.log
Here the debug log :
https://files.slack.com/files-pri/TF8BRFZS8-FFRSVSVGS/download/2019-01-29t10_59_28_382z-debug.log

So i did npm install instead and the install finished well, but when i launch the npm run start i get this message errors (see image below)
https://files.slack.com/files-pri/TF8BRFZS8-FFRPGHG2X/image.png

Any idea how to resolve this ? thank you for your help ;)
@mastertheblaster
Copy link
Collaborator

Hi @easyvico,

If you want to run npm run start inside the cloned repo https://github.com/wix-incubator/mjml-react, then you don't need to npm install react react-dom mjml mjml-react.

You need to do npm install react react-dom mjml mjml-react inside your custom project. If you want to consume mjml and mjml-react as library.

Maybe it would be easier if you could describe your use case, what are you trying to achieve.

Cheers

@easyvico
Copy link
Author

easyvico commented Jan 29, 2019 •
edited
Loading

Hi @mastertheblaster
Thank you for reply.
Maybe i didn't understand how to run the project, i thought it was like a create-react-app with npm run start
I would like to make an email with mjml code by using react and see the result in the browser like another react project. How to convert the react code in html ?

@mastertheblaster mastertheblaster added the question Further information is requested label Jan 30, 2019
@mastertheblaster
Copy link
Collaborator

Hi @easyvico,

This project is meant to be run on a server side.
Official mjml library doesn't run, nor is supported to be run inside a browser.

mjml-react should be used on a server/node side (server side rendering).
I have created another issue #17 for creating a sample project showing the usage.

I hope it would help you and other developers to easily bootstrap a new project.

Cheers

@easyvico
Copy link
Author

Hi @mastertheblaster,
Thank you very much I can not wait to test it ;)

@mastertheblaster
Copy link
Collaborator

Hi @easyvico

Here you are https://github.com/wix-incubator/mjml-react-example
Let me know if this helps you.

Cheers

@mastertheblaster
Copy link
Collaborator

Closing for now, please feel free to reopen if needed

@easyvico
Copy link
Author

easyvico commented Mar 3, 2019 via email

@easyvico
Copy link
Author

Hello, i tested it and it works well, but i was wondering where is the html generated ?
I can see it when i inspected the email in my browser but is it possible to get the html file directly in the project ? It isn't in the dist folder...thank u

@mastertheblaster
Copy link
Collaborator

Hi @easyvico,

The code is being run on a server. It's generated by node express lib (at runtime). It can also be configured/developed as a shell script. What's your usecase? This is the code https://github.com/wix-incubator/mjml-react-example/blob/master/src/email.js#L15 which is being invoked when you open a browser and use http://localhost:3000 url.

Regards,
Mantas

@easyvico
Copy link
Author

Hi Mantas, i would like to get the html file generated because i want to test the email before sending to the customers...
Another question is about React, the purpose is to put components in components to control elements and reduce the main file. But it doesn't work.
For example i tried to put my email header in another file Header.js and call it with

in my main email.js but it doesn't work. Here an example

Regards

email.js

import React from 'react';
import Header from './components/Header';
import {
  Mjml,
  MjmlHead,
  MjmlTitle,
  MjmlPreview,
  MjmlBody,
  MjmlSection,
  MjmlColumn,
  MjmlButton,
  MjmlImage,
  MjmlText,
  MjmlStyle
} from 'mjml-react';

export const generate = () => {
  return (
    <Mjml>
      <MjmlHead>
        mjmlsty
        <MjmlTitle>Last Minute Offer</MjmlTitle>
        <MjmlPreview>Last Minute Offer...</MjmlPreview>
      </MjmlHead>
      <MjmlBody width={640}>
        <Header />
      </MjmlBody>
    </Mjml>
  );
};

Header.js

import React from 'react';
import {
	Mjml,
	MjmlHead,
	MjmlTitle,
	MjmlPreview,
	MjmlBody,
	MjmlSection,
	MjmlColumn,
	MjmlButton,
	MjmlImage,
	MjmlText,
	MjmlStyle
} from 'mjml-react';

const Header = () => (
	<div>
		<MjmlSection padding='10px 0px'>
		  <MjmlColumn>
			<MjmlText font-size='12px' color='grey' align='center'>
			  Si cet email ne s'affiche pas correctement, vous pouvez le visualiser gr&#226;ce &#225; ce
			  <a href='http://www.maif.fr' style={{color: 'pink'}}> lien</a>
			</MjmlText>
		  </MjmlColumn>
		</MjmlSection>
		<MjmlSection padding='10px 0px' backgroundColor="#ede9e2">
		  <MjmlColumn>
			<MjmlImage src='http://fakeimg.pl/60x60/' alt='logo' width={60} />
		  </MjmlColumn>
		</MjmlSection>
	</div>
);
  
export default Header;

@mastertheblaster
Copy link
Collaborator

Hi @easyvico,

I have updated the example project so you could run it from command line.
https://github.com/wix-incubator/mjml-react-example#running-from-command-line

So now you can change the components and do like:

npm run build
npm run generate

Regarding the example you gave, there is one mistake here.
MJML parser expects a correct structure of tags, so if you would change your Header.js file to smth like:

const Header = () => ([
  <MjmlSection key="first" padding='10px 0px'>
    <MjmlColumn>
    <MjmlText font-size='12px' color='grey' align='center'>
      Si cet email ne s'affiche pas correctement, vous pouvez le visualiser gr&#226;ce &#225; ce
      <a href='http://www.maif.fr' style={{color: 'pink'}}> lien</a>
    </MjmlText>
    </MjmlColumn>
  </MjmlSection>,
  <MjmlSection key="second" padding='10px 0px' backgroundColor="#ede9e2">
    <MjmlColumn>
    <MjmlImage src='http://fakeimg.pl/60x60/' alt='logo' width={60} />
    </MjmlColumn>
  </MjmlSection>
]);

The key changes are:

  • remove div element
  • return an array
  • give a unique key attribute for each section in a result array

And now you can automate things:

npm run build
npm run generate | <execute some other app which will receive the HTML>

Cheers

@easyvico
Copy link
Author

easyvico commented Apr 1, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hi,

Ok, seems there is a process running in a background.
Maybe the app crashed and didn't exit clean so
you can use killall -9 node command, to kill any previous instances of app.

Regards,
Mantas

@easyvico
Copy link
Author

easyvico commented Apr 2, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hi @easyvico,

You can clone/fork the repo and do whatever you like :) It's up to you.
I guess the branch is not required, you can maintain your own fork and push code there.

https://help.github.com/en/articles/fork-a-repo

Regards,
Mantas

@easyvico
Copy link
Author

easyvico commented Apr 2, 2019 via email

@easyvico
Copy link
Author

easyvico commented Apr 4, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hi,

Sorry but i am not able to see your screenshot. In any case, i guess your code looks like:

<MjmlColumn cssClass={variable}>...</MjmlColumn>

If so, then make sure your variable is a string. According to your problem description, variable in your code is an object.

Regards,
Mantas

@easyvico
Copy link
Author

easyvico commented Apr 4, 2019 via email

@easyvico
Copy link
Author

easyvico commented Apr 4, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hi @easyvico ,

I have extended the example project on how to use class names and styles.
Give it a try: wix-incubator/mjml-react-example@90f32d1

Cheers

@easyvico
Copy link
Author

easyvico commented Apr 5, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hi @easyvico ,

Inline example using a pseudo code:

<MjmlStyle inline>.blue { color: blue; }</MjmlStyle>
<MjmlSection cssClass="blue"/>

will generate smth like:

<div class="blue" style="color:blue;"></div>

And without inline property:

<MjmlStyle>.blue { color: blue; }</MjmlStyle>
<MjmlSection cssClass="blue"/>

It will look smth like:

<style>.blue { color: blue; }</style>
<div class="blue"></div>

This property tells if CSS class properties should be injected inside the referenced element or not. You won't see a difference in a browser, but you might see a difference based on mail client. Personally I would always use inline property as it's more safe.

Regards,
Mantas

@easyvico
Copy link
Author

easyvico commented Apr 5, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hmm, not sure i got you correctly, but i guess you misunderstood my examples.
Consider the following example:

const fs = require('fs');
<MjmlStyle inline>{fs.readFileSync('./my-classes.css')}</MjmlStyle>
<MjmlSection cssClass="some-name-from-my-classes-css-file">...</MjmlSection>

This will make sure that all CSS properties inside your my-classes.css will be inlined inside MjmlSection.

Regards,
Mantas

@easyvico
Copy link
Author

easyvico commented Apr 6, 2019 via email

@easyvico
Copy link
Author

easyvico commented Apr 9, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hi,

In node relative paths are being resolved from a base directory where you launched the main application. As you see in your example it tries to look for a file relative to ./dist folder. The easiest solution for testing purposes is todo like: wix-incubator/mjml-react-example@4ea2e0a

  1. Create ./assets folder, put all your css there.
  2. Inside your code write like readFileSync('./assets/file.css')

And you are good to go.

Regards,
Mantas

@easyvico
Copy link
Author

easyvico commented Apr 9, 2019 via email

@easyvico
Copy link
Author

easyvico commented Apr 9, 2019 via email

@easyvico
Copy link
Author

easyvico commented Apr 10, 2019 via email

@easyvico
Copy link
Author

easyvico commented Apr 11, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hi @easyvico ,

I guess you have forked the repo. If so, push all the code to it and give me the link to check.
Cause it's complicated to advice smth without seeing an actual code.

Cheers,
Mantas

@easyvico
Copy link
Author

easyvico commented Apr 11, 2019 via email

@mastertheblaster
Copy link
Collaborator

Hi @easyvico ,

I have improved the example project, you can take a look here:
wix-incubator/mjml-react-example@ceb1910

However keep in mind - this navigation will work only in your local computer, for demo purposes mostly. But in real live once you send this email, the link will not work, cause it's the nature of email.

Regards,
Mantas

@easyvico
Copy link
Author

easyvico commented Apr 16, 2019 via email

@easyvico
Copy link
Author

easyvico commented Jun 14, 2019 via email

@jhnsml
Copy link

jhnsml commented Mar 1, 2021

@easyvico storybookjs/storybook#4082 (comment). It should solve the fs issue

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

No branches or pull requests
3 participants
@mastertheblaster @easyvico @jhnsml