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 (
HelloWorld = require '../components/HelloWorld.cjsx'
HelloWorld: -> HelloWorld
My component looks like this (
React = require 'react'
class HelloWorld extends React.Component
And my template (
Any ideas? Have been stuck on this for a while now.
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.
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?
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)