Unable to import React components in sibling directory

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.

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

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.

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

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?

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?

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.