For those of you who have been looking to integrate Webpack into your Meteor app, here is the most basic possible introduction. Once you go through this, you’ll better understand how the kickstart projects work.
14 Likes
I just finished taking one the the kickstart examples and made a simple hello world from it. I wish I had this a bit earlier.
I’ve finished an entire app with the kickstart hugeapp. The only issue that I think that must be fixed is using Meteor’s react package and npm’s one together. Only npm package should be used!
1 Like
Perfect starting point from which to grok the more complex webpack/React.js boilerplates. It is very much appreciated.
2 Likes
@preinders I was thinking the same thing! That’s why I went ahead and did it 
@gabrielhpugliese Agreed. I think the reason he went with the Meteor package had something to do with ReactRouterSSR.
@jacobin You are most welcome!
Thanks for your great article(s) !
I got this message:
npm WARN deprecated babel-core@5.8.33: Babel 5 is no longer being maintained. Upgrade to Babel 6.
Babel version you used:
“babel-loader”: “^5.3.2”
I tried to update to babel 6.x, but I got a lot of errors.
Is their a special reason still using babel 5.x ?
1 Like
Hmm, interesting. Not sure why that is. Might be an issue with the package.
This is because babel 6 has breaking changes. I’ll update the kickstart projects soon, not very hard to fix.
Tried it out and worked really well. I was trying the hot reload feature that I have heard a lot about but it did not seem to work. This is what I get when I change the increment from +1 to +2.
[HMR] connected
client.js?4977:106 [HMR] bundle rebuilding
client.js?4977:108 [HMR] bundle rebuilt in 1062ms
process-update.js:25 [HMR] Checking for updates on the server...
process-update.js:59 [HMR] The following modules couldn't be hot updated: (Full reload needed)
process-update.js:64 [HMR] - ./client/entry.jsx
process-update.js:102 [HMR] Reloading page
The reloading page script actually doesn’t refresh the page either because the variable reload is set to false
function performReload() {
if (options.warn) console.warn("[HMR] Reloading page");
if (reload) window.location.reload();
}
Just wondering what I should do to get hot reload to work. Other than that it was a great introduction. Thanks!
You need to change your client webpack configuration to look more like the
Kickstarter-simple example 
If that doesn’t do it, let me know.
The babel-plugin-react-transform doesn’t support babel 6 yet so we’ll have to wait a few days or weeks before we can upgrade.
oh my god just what was missing. thank you so much! the examples that came before didn’t really help me much.
just so everyone knows: Sam wrote the next step of this tutorial, which is also a must read in my opinion.
one approach, if found interesting and working: https://github.com/jedwards1211/meteor-webpack-react
1 Like
@samcorcos these are great! One question tho is about meteor collection data. Can you get reactive data with the ReactMeteorData mixin using the getMeteorData function still, or does that require some core react packages to be added to the project?
You just need the ReactMeteorData mixin and it will be reactive as long as the component is mounted. It will unregister automatically as soon as the component is unmounted.
beauty, thanks!
for anyone else finding this:
%> meteor add react-meteor-data
make sure you add this package before you try using the ReactMeteorData mixin.
also, for anyone using material-ui with this example, make sure you add
"react-tap-event-plugin": "0.2.1"
to the webpack.packages.json file and import it in your entry.jsx component
@samcorcos did a great job with this tutorial
https://medium.com/@SamCorcos/meteor-webpack-from-the-ground-up-f123288c7b75141
I am in the same situation as @jeremybyu, I can’t get hot-reload working. Everything else works as expected. I tried following the instructions here and creating the component in a separate file but couldn’t get it to work. Has anyone got hot-reload working with the tutorial?
Thanks for the update. Will try the kick starter project later.
I had the same problem too.