ReferenceError: exports is not defined

[awe2m2n2s]

By using rails with the asset-pipeline a ReferenceError: exports is not defined occurs. Or do we do something wrong?

requiring in the application.js //= require react-leaflet //= require react-leaflet/Map //= require react-leaflet/TileLayer //= require react-leaflet/Marker //= require react-leaflet/Popup

and trying out the example code: renderMap: function(lat, lng) { position = [lat, lng]; map = (

  );

},

[PaulLeCam]

Hi, I'm not familiar with rails so I don't know how it processes JS assets, but this lib is available in different formats:

• CommonJS (the default exposed by package.json) in /lib
• ES2015 modules in /src
• UMD in /dist, exposing the library as window.ReactLeaflet

Depending on your environment you should choose the most appropriate one.

[silvenon]

@awe2m2n2s it's pretty weird that you're trying to use a React plugin in Rails. Why not Leaflet directly?

[awe2m2n2s]

Thanks @PaulLeCam! you are just great. Here is how it finally worked within rails:

1. use "compiled" ReactLeaflet from /dist within /vendor/assets/javascript/react-leaflet.js (additionalliy versioning would be smart)
2. require react-leaflet within application.js
3. define e.g. Map/TileLayer/Marker/Popup with var Map = ReactLeaflet.Map;
4. enjoy leaflet with react thanks to @PaulLeCam!!

react-rails community find more information via https://github.com/reactjs/react-rails/issues/413

here is the code:

newmap.js.jsx `var NewMap = React.createClass({ getInitialState: function() { return { lat: 51.505, lng: -0.09 }; }, render: function() { var Map = ReactLeaflet.Map; var TileLayer = ReactLeaflet.TileLayer; var Marker = ReactLeaflet.Marker; var Popup = ReactLeaflet.Popup; var Position = [this.state.lat, this.state.lng]; return (

    );
}

});`

and index.html.erb <%= react_component "NewMap"%>

[awe2m2n2s]

@silvenon: That's actually true ^^. I guess I just wanted to have it clean and not switch all the time around but please feel free to advice me how and when to work in rails with react plugins and when not. One remark: I wanted to create the webapp with react-rails and then later on switch to react-native for IOS and Android app. I guess therefore I wanted to stay 'within react' if you want so. But please, please! let me know what you think as I am completely new :)

[PaulLeCam]

@awe2m2n2s You can see the version of the lib in package.json and in the releases page, and using npmcdn you can specify the version you need, ex: https://npmcdn.com/react-leaflet@0.10.0/dist/react-leaflet.min.js, depending on your needs it may be more convenient than embedding the file in your project.