Webpack compiler inside Meteor (ES6 modules, hot reload and code splitting!)

garrilla · October 29, 2015, 4:43pm

looking at https://github.com/thereactivestack/meteor-blazetoreact/blob/master/lib/BlazeToReact-client.jsx#L18 it should be fine as those props are passed into Blaze.renderWithData()

not sure this could effect it, but is the space in collection= "TBooks" breaking the props

or, is there any issue with it being wrapped in a span (which BlazeToReact does by default - you can check with ReactTools)

pete · October 29, 2015, 4:52pm

Thanks, for taking the time to evaluate. I checked into it the chrome console react - looks clean, no spans, all properties are there.

On my previous project prior to adapting to webpack the very same declaration worked fine. So either I forgot / messed something up somewhere else or it is the webpack that makes all the difference. I will post if I get it to work

optilude · October 31, 2015, 9:37pm

So, I’m not quite sure what did it (my guess is the new webpack and default webpack config), but syncing up to the latest kickstart seems to have solved my problem. Thanks!

fvg · November 5, 2015, 3:11pm

Hey @benoitt, that package looks great! Thank you

Some questions:

Does the package remove all of Meteor’s default file loading? It looks like /server and /client folders still work as usual, while js (and css?) files aren’t loaded anymore.
I’m currently using packages to split my code into modules (everything is inside /packages now). What do you think is the best way to move towards using webpack? Having includes seems just so much easier than using package.js files, plus safe Meteor.is[Env] makes some things really simple.
Is it possible to use webpack inside packages?

benoitt · November 5, 2015, 4:41pm

Hey thanks for trying it.

Some files (mainly webpack.conf.js) needs to be only on the client or only on the server so we have to follow the same way Meteor is working. Outside of that, you can use your own structure.

If you look at my examples, I have a modules folder instead of packages. You just require your modules within your entry files and that’s it. Couldn’t be simplier. For Meteor.is[env], it is still working the same way.

Not at the moment and I’m not sure I see a good way of doing that.

dolatow1 · November 5, 2015, 7:15pm

Thanks so much for this package! I was wondering if you/anyone were able to get testing with velocity working?

benoitt · November 5, 2015, 7:27pm

I did made unit and integration run with velocity and webpack but it will not work with the current version. It will be released soon (probably tomorrow)

dolatow1 · November 5, 2015, 7:33pm

That is awesome news! You da man

brajt · November 6, 2015, 3:39pm

I can finally play with the new version of your package. So far I tried to install the FlowRouter flavor and noticed that:

npm WARN install Couldn't install optional dependency: Unsupported
npm WARN engine postcss@5.0.10: wanted: {"node":">=0.12"} (current: {"node":"0.10.40","npm":"3.3.12"})

Should I really upgrade Node? Won’t it break all my Meteor projects? What is the need for PostCSS module here even?

Another thing. Is there any way to get rid of that from console?

benoitt · November 6, 2015, 3:58pm

Meteor is currently running on Node 0.10.40 and there is nothing we can do about it. You might want to use an older version that support 0.10.

brajt · November 6, 2015, 4:20pm

I don’t want to use PostCSS at all. I’m just wondering why is it in Kickstart by default if it’s not even working with Meteor.

benoitt · November 6, 2015, 4:39pm

Their is no dependency anywhere for postcss. It might be a package that you have that depends on it I don’t know.

garrilla · November 6, 2015, 4:43pm

There’s no requirement for you to upgrade node, you have the appropriate version for meteor.

You need to find out where that postCSS dependency exists. As the node upgrade warning is related to that.

juliancwirko · November 6, 2015, 4:43pm

I think that here you have standard (global) Npm info about PostCSS package. This is not related.

btw. PostCSS works with Meteor: https://atmospherejs.com/juliancwirko/postcss

jiku · November 7, 2015, 12:19am

First of all, thanks a lot for making this!

In modules/Component/client/css/styles.import.css, when I add @import 'basscss';, it’s affecting the whole app. Not adding it while still having basscss in webpack.packages.json, nothing’s affected. With import.css, shouldn’t that import be scoped to Component?

(This is using blaze-template-helper, FlowRouter and BlazeLayout to integrate modules/Component into an existing, Blaze-centric app. Seems to work fine except for the above.)

benoitt · November 7, 2015, 2:46am

No it is not how css with webpack are working at all. When your component will be mounted for the first time, it will see it needs the CSS and add it to the page. It can’t be restricted to only a component.

dbackeus · November 7, 2015, 10:50am

Looking forward to this one

mbrookes · November 7, 2015, 3:43pm

Speaking of PostCSS - how would one go about integrating postcss-js and autoprefixer now that it supports CSS in JS (JSX)?

jiku · November 8, 2015, 1:49am

Oh. What about new-fangled CSS modules? Just found out about them. They’re supported by Webpack’s css-loader by adding the modules arg (see local-scope, css-modules), but I’m still figuring out how or if it could be used with your package. Any thoughts? There are examples here for CSS modules and here for React CSS modules, but they’re using import syntax instead of require() (in componentWillMount()).

benoitt · November 8, 2015, 9:46pm

Yes you could easily use it with webpack and Meteor. You only have to change your css loader. I also love the idea of local CSS.