Unable to import React components in sibling directory

1

I have a library of React Components and am currently working on a meteor app to simply show examples of said components. The directory structure looks like the following:

library/
  components/
    button/
  docs/
    imports/
      ui/

My meteor application is located in docs/, and my main App component is in imports/ui/. I’m trying to import a library component into my App component, but am routinely getting Cannot find module errors.

Is there any reason I would not be able to import components from outside the directory of the Meteor application? I know the imports/ directory has special properties but am unsure as to whether it would cause this issue.

2

Meteor scans your files for imports, and it only scans inside the app directory. One way to share components between different apps is via npm, or a meteor package, you could also use a symlink.

1 Like
3

Is this specific to the meteor design?

I was thinking of simply publishing the /library directory to npm, and then installing it as a dependency in the /docs meteor app, but this seems like an odd hack when the directory is already right there.

4

You can also just make a symlink - ln -s library ../library

5

So I ended up just separating the library of components and the example meteor app into two different directories. I ran npm install --save ../library and it successfully added the dependency as "library": "file:///path/to/lib", with the package being saved to my node_modules.

However, when I import one of the components and try to use them, the console spams 29 errors, starting with:

Uncaught SyntaxError:
    Unexpected token import
Uncaught TypeError: 
    Cannot read property 'meteorInstall' of undefined
Uncaught TypeError: 
    Cannot read property 'meteorInstall' of undefined
Uncaught TypeError: 
    Cannot read property 'meteorInstall' of undefined
Uncaught TypeError: 
    Cannot read property 'meteorInstall' of undefined
Uncaught TypeError: 
    Cannot read property 'meteorInstall' of undefined
Uncaught TypeError: 
    Cannot read property 'Random' of undefined
Uncaught TypeError: 
    Cannot read property 'meteorInstall' of undefined
Uncaught TypeError: 
    Cannot read property 'MongoID' of undefined

The code:

import React, { PropTypes } from 'react';
import Button from 'library/components/button/Button.jsx'

export default class App extends React.Component {

  render() {
      return (
          <div>
              <Button>Click Me</Button>
          </div>
    );
  }
}

Removing the <Button/> component and it’s import removes the error. What is going on here?

6

Digging deeper, I think the issue may be related to it not being able to understand ES6 imports properly.

The first error Uncaught SyntaxError: Unexpected token import doesn’t point to any lines in my Meteor apps code, but clicking on it highlights an error where I import React in my libraries Button component, for example:

import React, { PropTypes } from 'react' // <-- This is highlighted.
import classnames from 'classnames'

export default class Button extends React.Component {
    //...
}

Can someone chime in if they think they know what the issue might be?

7

Yeah Meteor doesn’t compile node module dependencies, those are assumed to be precompiled and have no way to indicate a build process. So you want to either go with a Meteor package (just put a package.js in there and use PACKAGE_DIRS) or a symlink.