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

Amazing! But Iā€™m scared to use something I donā€™t understand. Couple suggestions for the readme if you get the time:

https://github.com/thereactivestack/kickstart-hugeapp/blob/master/modules/AdminApp/client/index.js#L21
Are you handling chunking manually? Why not use a chunking plugin?

https://github.com/thereactivestack/kickstart-hugeapp/blob/master/entry/client/routes.jsx#L4
As I understand this, all modules are served up SSR, if thatā€™s correct, how could I change that? Anything behind a login wall (like admin) has no need for SEO and Iā€™d probably prefer to have the client load it (but Iā€™ll happily change my opinion if thereā€™s a reason for it).

In your demo, if I refresh the admin page, it loses its context & shows up on a white background. Iā€™m not great with webpack yet, but is this because admin needs its own entry point? how could i fix this?

Thanks for taking away all our excuses not to use webpack :wink: Cheers

This is because it is much easier (and automated) to do it like this. The CHUNK_COLLECTOR is for react-router-ssr. You donā€™t really need to fully understand but the SSR will not work correctly if the chunks on the first page load are not already loaded. Your first client render will be different than what your server rendered.

This is not a bug, it was inteded to do so. The CSS is required within the TodoApp and when you are inside AdminApp, the component has not been loaded yet. If you want to fix this, you have to make sure your CSS for the layout is in your main App component.

In the example, when you go in AdminApp, it has no CSS loaded yet. When you go in the TodoApp, it loads the .css. Then, when you go back to the admin, the CSS is still on the page. You will never have this problem if you are class names that are not colliding.

1 Like

Hi again!
Can you, @benoitt, pls, look at the errors screenshot in this repo?

Iā€™m having trouble deploying with mup

Iā€™m getting

[95.138.190.18] Meteor requires Node v0.10.40 or later.[95.138.190.18]
[95.138.190.18] error: Forever detected script exited with code: 1[95.138.190.18]

my mup.json includes

  // WARNING: Node.js is required! Only skip if you already have Node.js installed on server.
  "setupNode": true,

  // WARNING: If nodeVersion omitted will setup 0.10.36 by default. Do not use v, only version number.
  "nodeVersion": "0.10.40",

any ideas @benoitt or maybe @arunoda has an idea?

Is there any ways to get this working with the semantic-ui package?

Hi guys,

I just opened another topic - comparing this approach to meteor packages and would love to hear your input. :smile:

To get semantic-ui working, I did npm install semantic-ui. I then went through the steps ending with gulp build. After that, I moved the files in the outputted dist folder into my modules folder.

Testing this out in windows. I tried this and Iā€™m seeing HMR Connected in chrome console, as well as Client modified --refreshing in the Command Prompt, but the components are not updating. In fact, Iā€™m only seeing changes if i shut down and restart the server. Any ideas?

EDIT: could be related to this issue as I am also seeing Error: EBADF, read in the command prompt

I will need more infos. What have you tried? What file have you changed? What version are you using?

Thatā€™s awesome !

Is it possible to make webpack build for Electron? Is it as simple as to place target: 'atom' somewhere? I saw that in the documentation of webpack, but I had no luck making it work in the kickstart-simple project.

Hi,

Iā€™m trying to convert a moderately complex app from using universe:modules and browserify to using this. This also involved an upgrade to React and ReactRouter, so things are kind of broken, but itā€™s starting to render.

Iā€™m seeing two errors in the console that mystify me, though. Iā€™m wondering if they mean something to you:

Warning: React can't find the root component node for data-reactid value `.0.0.0.0.1:$=11:$1.$=11:$1.$=11:$1.$=11:0`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.

plus this warning:

Warning: <App /> is being rendered by both MyApp and RoutingContext using the same key (null) in the same place. Currently, this means that they don't preserve state. This behavior should be very rare so we're considering deprecating it. Please contact the React team and explain your use case so that we can take that into consideration.

and:

Uncaught Error: Invariant Violation: unmountComponentAtNode(...): Target container is not a DOM element.

I am thinking this has something to do with how the router is working. Iā€™m a bit confused about how the ReactSSR stuff actually works in the kickstart-example (I have basically the same entry as that, and then my own app under modules as per the example).

Any hints on what may be causing this?

Hi again.
One small question: how to add Material-UI to kickstart? )-:

It would be hard without looking at your code. What your webpack.conf.js looks like and your entry.js files?

You can add material-ui with webpack.packages.json. Make sure to use ~0.12.5 because the next versions require React 0.14 (which is not available yet on the Meteor package).

I want to run formsy-mui-demo inside kickstart-flowrouterā€¦
I tried to add packages: npm install material-ui@0.12.5, npm install formsy-react@0.14.1 and npm install formsy-material-ui

Today I tried add to webpack.packages.json:
ā€œmaterial-uiā€: ā€œ0.12.3ā€,
ā€œformsy-reactā€: ā€œ0.14.1ā€,
ā€œformsy-material-uiā€: ā€œ0.2.2ā€

In both cases, the following errors in the chrome console:

  1. Uncaught TypeError: Cannot read property ā€˜firstChildā€™ of undefined
  2. Uncaught Error: Invariant Violation: addComponentAsRefTo(ā€¦): Only a ReactOwner can have refs. This usually means that youā€™re trying to add a ref to a component that doesnā€™t have an owner (that is, was not created inside of another componentā€™s render method). Try rendering this component inside of a new top-level component which will hold the ref.
  3. Uncaught Error: Invariant Violation: removeComponentAsRefFrom(ā€¦): Only a ReactOwner can have refs. This usually means that youā€™re trying to remove a ref to a component that doesnā€™t have an owner (that is, was not created inside of another componentā€™s render method). Try rendering this component inside of a new top-level component which will hold the ref.

Hi,

Some relevant bits of code: https://gist.github.com/optilude/ba5892244f7d1ef0997a

That includes the webpack configs, the entries and the routing config.

Martin

been struggling with this one:
Iā€™d like to use css-modules, which basically takes icss, maps it, inlines it, and then extracts the text back into a pure css file. It does this by using the package extract-text-webpack-plugin. If i disable the extraction piece, the css stays inline & it works (which is fine for development). My solution would be a build step where it creates the css file & then meteor can pick it up & send it through the build process, but Iā€™m guessing youā€™ve discovered something more eloquent to obviate the need for a build folder?

config file as follows (comment out the highlighted line to use inline styles): https://github.com/gajus/react-css-modules-examples/blob/master/webpack.config.js#L35

2 Likes

Here are some research notes on building Webpack into Meteor from @dgreensp: Sharing some research into Webpack and the build tool ecosystem

6 Likes

This is truly an excellent edition to Meteor and I thank everyone involved for their determined efforts.
I have one question regarding the flow-router example (mainly due to my novice level with webpack and flow router).

Has anyone managed to get code splitting working like in the huge-app example but with the flow-router example.

I really like the feel of flow-router and am looking to migrate an existing meteor/react app across to webpack and flow-router and am just stuck at how to ā€œon demand loadā€ modules with flow-router.

I think this may be my final stumbling block and I thank you in advance for any assistance that can be offered :smile:

1 Like

If you read the Webpack doc and look at the kickstart-hugeapp example, I think you can figure it out. require.ensure is the key to all of this.

I was able to get this worked out, @benoitt. I forgot to require('path') in the conf.js. Thanks!

1 Like