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

[none]

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

[garrilla]

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?

[reel]

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

[thebarty]

Hi guys,

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

"All-in-Packages" vs. "Es6 Modules / Webpack": Which project-structure do you recon?

Hi guys, damn… all those options are soo confusing… in particular to me as a meteor newbie, I guess… I spend the last 2 days figuring out how to get the “all-in-packages” project structure working ( https://forums.meteor.com/t/is-packages-for-everything-the-solution-to-all-meteor-problems/ ). And so far I really like the approach. BUT is also stumbled upon the HUGE & fresh forum-topic “es6 modules / webpack” ( Webpack compiler inside Meteor (ES6 modules, hot reload and code splitting…

[dolatow1]

repo

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.

[zaklampert]

Update webpack:webpack package and just make sure you’re using path.join(__dirname, ‘…’, ‘modules’) in resolve.root instead of __dirname + ‘/…/modules’ in your webpack.conf.js.

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

[benoitt]

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?

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

[green-coder]

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.

[optilude]

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?

[none]

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

[benoitt]

Any hints on what may be causing this?

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

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

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).

[none]

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.

[optilude]

Hi,

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

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

Martin

[mattkrick]

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

[sashko]

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

[jasonweise]

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

[benoitt]

@jasonweise

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

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.

[zaklampert]

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

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

[mbrookes]

Uncaught TypeError: Cannot read property ‘firstChild’ of undefined

By chance I read your post, and then something that identified a possible cause within an hour of each other:

“Cannot read property ‘firstChild’ of undefined” error message on the JS console, which occurs when there are two React libraries in the same namespace).

https://www.npmjs.com/package/x-react-d3

Don’t know if that helps? Might be unrelated.

[accession]

I’m having an issue with the React Router SSR and Sass. In production mode I noticed that I was getting FOUC on load. When I pull in .css in componentWillMount() it renders just fine on the server. If I pull in .scss then it doesn’t load at all. Everything works perfectly on the client side. I’m sure it’s some issue on my side but I don’t know what to do. Any help? Relevant code below.

Server webpack.conf.js loaders:

loaders: [
      { test: /\.jsx?$/, loader: 'babel', query: { stage: 0 }, exclude: /node_modules/ },
      { test: /\.css$/, loader: 'style-collector!css' },
      { test: /\.scss$/, loader: 'style-collector!css!sass' },
      { test: /\.(png|jpe?g)(\?.*)?$/, loader: 'url?limit=8182' },
      { test: /\.(svg|ttf|woff|woff2|eot)(\?.*)?$/, loader: 'file' }
    ]

componentWillMount() example:

componentWillMount() {
    require('./css/bootstrap.css'); // Works on the server
    require('./css/app.import.scss'); // Does not work on the server
}