ReferenceError: Can't find variable: require

help
1

So I have a Meteor app that’s written in CoffeeScript and I’ve recently upgraded it to 1.3. Now this last weekend, I tried to experiment with converting part of its UI to React, but I’m having issues with that.

I made a brand new app as a playground and React to work there, including writing React components in CoffeeScript using the jhatma:cjsx package. However, after doing all the same steps in my original app, I’m stuck with the following error:

ReferenceError: Can't find variable: require

This is thrown on the first line of the following file (client/helpers/home.coffee):

HelloWorld = require '../components/HelloWorld.cjsx'

Template.home.helpers
  HelloWorld: -> HelloWorld

My component looks like this (client/components/HelloWorld.cjsx):

React = require 'react'

class HelloWorld extends React.Component
  render: -> 
    <h1>Hello World</h1>

And my template (client/templates/home.jade):

template(name="home")
  div
    +React(component=HelloWorld)

Any ideas? Have been stuck on this for a while now.

2

This happened to me when I upgraded an existing angular-meteor app. For me it was because I had removed the ecmascript package (which implies the modules package, which is where require is coming from). Adding the modules package fixed it for me.

3

Thanks @danryan. I tried adding both the ecmascript package, and just the modules package by itself. Neither were present in my app, probably because they’re new in Meteor 1.3.

But now I’m getting this error:

Error: Cannot find module '../components/HelloWorld.cjsx'

Tried moving my components into a client/imports directory, but that didn’t seem to fix it. Any ideas?

4

In your original post, it should have been ../../components/HelloWorld.cjsx (back up two levels to get back to client directory).

You can also use absolute paths (from the root of the meteor project) by using a leading slash. I think this is better when the file you are importing is not in the same directory. So, for instance you could put the component in the imports/components directory and do:
import HelloWorld from '/imports/components/HelloWorld.cjsx' (assuming you used export default HelloWorld in the component file)