How to set up Meteor + React + Essence?

help
1

I need help setting up Meteor + React + Essence. From the instructions on Essence.io I added the framework to my project as follows:

meteor npm install --save react-essence

However, I got a number of warnings indicating all of the components require a peer of react@^0.14.8 but none was installed.

1302×778 251 KB

Here is my package.js file:

{
  "name": "MyApp",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "meteor-node-stubs": "~0.2.0",
    "normalize.css": "^4.2.0",
    "react": "^15.2.1",
    "react-addons-css-transition-group": "^15.2.1",
    "react-addons-pure-render-mixin": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-essence": "^1.0.10",
    "react-mounter": "^1.2.0",
    "react-router": "^2.6.0"
  }
}

And my .meteor/packages file contains:

# meteor libraries
meteor-base
ecmascript
es5-shim
check
tracker
session

# standard libraries
jquery
underscore
less
email

# accounts
accounts-base
accounts-password

# ui
static-html
react-meteor-data

# data
mongo
mdg:validated-method
mdg:validation-error

# mobile
mobile-experience

# additionals
jparker:gravatar
mrt:jquery-ui-sortable
momentjs:moment
nathantreid:css-modules
standard-minifier-css
standard-minifier-js

Despite those warnings I was able to add an AppBar and it showed up on my page, but then again there are a few errors showing in my browser console and I’m unable to add the Icon component spitting out the following error.

Started MongoDB.
Errors prevented startup:

While building for web.browser:
node_modules/essence-icon/lib/icon.less:1: Unknown import: ~essence-core/src/less/variables.less

Your application has errors. Waiting for file change.`

The offending code is the following:

@import (reference) '~essence-core/src/less/variables.less';

Removing the (reference) and giving the import a relative path '../../essence-core/src/less/variables.less'; does get rid of the error but the icons are not showing.

How do I fix this? Has anyone here got the Essence framework working for them in Meteor 1.3+ (I’m on 1.3.4.4)?

2

Regarding the npm warnings, Essence hasn’t been updated to use React 15.x:

That being said, I’m running into similar issues when trying to use it, caused by Meteor not being able to load the packages locally required less files. For example,

import React from 'react';
import Icon from 'essence-icon';

export const IconTest = () => (
  <Icon name={'navigation-apps'} className={'e-text-indigo-500'} />
);

results in

Uncaught Error: Cannot find module './icon.less'

The node_modules/essence-icon/lib/icon.js file that’s loaded by the package requires the icon.less file as

require('./icon.less');

which seems to make sense, since it’s in the same directory as the icon.less file.

Not sure what to make of this one - you might want to report this via a GH issue.

1 Like
3

I have been at this for two days now and I’ve tried out almost all React + Material UI frameworks with Meteor and the only one I’m having success with is Material-UI. So I’ve opted to move to that for now. I still can’t get the icons to show up.

Have you used Material UI before? Any ideas on how to show the icons?

4

I figured out how to show icons, so for those how might be struggling with this here is what I’ve done.

It looks like the examples use classes for a custom font e.g., muidocs-icon-navigation-expand-more. These won’t work unless you have CSS defining those classes. I chose to go with the SVG icons which are included in the package itself.

The following is my AppNav component:

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import ActionExitToApp from 'material-ui/svg-icons/action/exit-to-app';

export default class AppNav extends React.Component {
    render() {
        const userMenu = (
            <span>
                <IconButton><ActionAccountCircle /></IconButton>
                <IconButton><ActionExitToApp /></IconButton>
            </span>
        );
        return (
            <AppBar
                title="Title"
                iconElementRight={userMenu}
            />
        );
    }
}

Give me the following: (note have changed some colors in the theme object)

2560×150 7.33 KB

5

I think you would need to use css modules with support for Less files, which is unfortunately not supported OR the Meteor build tool would need to support import of Less files directly from JS natively, which it does not.

2 Likes
6

Finally decided on using React-Toolbox despite its lack of a proper grid system. I couldn’t go with Material-UI after seeing all those inline styles it generated, I just cringe at that site of that! Essence would have been ideal for me it has the grid system and some great documentation. Too bad it doesn’t work with Meteor!

Here is a screenshot of my day’s work: (just a dummy!)

2784×1770 340 KB