Need help with importing NPM package with 1.3 beta

Need some help with importing NPM package.
I’m using meteor 1.3-modules-beta.0 and I have added packages react and modules.
I created node_modules dir and did

npm install material-ui

The package installed fine (it even created extra copies of react and react-dom…)
I can’t get it to work however.
This is my app:

import RaisedButton from 'material-ui/lib/raised-button'

Meteor.startup(function () {
  ReactDOM.render(<App />, document.getElementById("render-target"));

App = React.createClass({
  render() {
    return (
        <RaisedButton label="'Default" />

In the browser console I get:

Uncaught SyntaxError: Unexpected token import

If I replace the import statement with

RaisedButton = require('material-ui/lib/raised-button');

then I get:

Uncaught Error: Cannot find module 'react/lib/ReactDOM'

Can someone help me get this simple app working?

You did do meteor add modules right?

1 Like

I think you need to use the require syntax. As in let RaisedButton = require('material-ui/lib/raised-button')

At least I saw I wasn’t able to use import, but could only use require inside of .jsx files

yes, I did add modules…

I tried the require syntax also…

Just saw this issue:

1 Like

Yepp, this is curently a major issue…

Anyone found a decent fix to be able to use both React(.jsx) and the new modules(.js)?

You can use require for now but import/export hopefully will get fixed. Even though you can use require you still need webpack/browserify in the mix.

I did try to use require (see above) but also could not get it working.
Perhaps I used some wrong syntax; can you check?

This is definitely a bug! Fixing it might be as easy as adding modules: true here, but obviously we need to make sure the React integration works seamlessly otherwise. Getting the new modules package to work with (or take the place of) the cosmos:browserify package used by react-runtime-dev might end up being the trickiest part.

The package installed fine (it even created extra copies of react and react-dom…)

@willemx @benjamn why the extra copies? Do we not want to avoid that?

I had already done meteor add react

So does that mean if we want to include packages from npm that depend
on react, we will either have multiple copies/versions of react in our
project or we cannot use meteor’s react integration and rely on stock
react? and the same goes with ecmascript probably?

You maybe could add packages like react-meteor-data individually and not add meteor:react, but do npm install react, but I haven’t tried this myself yet.

Yep and since both react and npm are becomming 1st class citizens in meteor world perhaps the best practice should be documented somewhere @benjamn @sashko

Help, I can’t get the most simple thing to work with the 1.3 beta 2.

I have ecmascript in my packages, and I added modules too.

The strange thing is when I tried

import moment from "moment";

this worked right away on the server (without even npm install moment ??). However on the client it doesn’t work at all.

I’m confused about a couple things: 1. the need for node_modules and npm install, and 2. How exactly the module gets built into the client code? Do I need to do something else? Do I need meteorhacks:npm? npm-container?

  • 1, im having a miserable time trying to figure out the source of my errors. I really really wish we had some sort of guideline or best practices doc for:
    A. Converting existing Webpack/Atmosphere/Browserify react app into the new Meteor npm module architecture.
    B. Starting a fresh app and developing with the react hot-loading plugin (unless 1.3 brings crazy decreases in reload time), while also understanding where/how/when packages should be properly imported and referenced (npm, Browserify, Atmosphere, etc…).

I’ve come to the point where I pretty much expect any change I make to throw errors at me and crash my app, thus leading to a very long session of ‘import/require/export trial-and-error’ where I try a bunch of different loading order combinations to make those mean errors leave me alone.

note: I realize how brand-spanking new 1.3 is, and I think the MDG devs have done a great job with this release, and I’m still head-over-heels in love with Meteor in general. I’m just a bit cranky because I’m not going back to Blaze, and treading onwards with my current project is turning me into a bit of a masochist :blush:.

you can use the file extension: import App from './containers/index.jsx

@antoniopresto whats the difference between including the extension and not?

You’ve to specify the file extension when you’re importing a non .js file, a good example of this would be a .jsx file.