@zafaransari Woooo thanks for the link! 
Does this Webpack thing also work in Cordova apps? It would be amazing if that extremely buggy and slow hot code reload on mobile apps could be replaced by something faster and more reliable.
1 Like
It should but I haven’t tried it…
1 Like
@SkinnyGeek1010 I’m Done With MongoDB… It’s Leaving My Stack 
. Super excited about GraphQL/Relay and RethinkDB. I am already using GraphQL with Meteor.
2 Likes
Do you require all assets as well? SCSS, images, etc? Are these files outside the meteor project scope?
How are you doing that? It bugs me how GraphQL requires you to create the interface with whatever DB you want to use. Such a pain. And I’m not sure you can do db writes with graphql anyways. Have you ever used Neo4j?
Hi I get this error / warning.
I am still figuring out how to update all modules to most recent versions.
can anyone help here? thnx
54% 3/4 build modulesWarning: you are using an outdated format of React Transform configuration. Please update your configuration to the new format. See the Releases page for migration instructions: https://github.com/gaearon/babel-plugin-react-transform/releases
Hash: a06902057b9ed9d33935
Version: webpack 1.12.2
Time: 895ms@radosch eact-transform has been going through some changes lately. Are you working with the empty boilerplate? I haven’t tried this yet but it seems the .babelrc file needs to be updated to something like this under v1.1: https://github.com/gaearon/babel-plugin-react-transform/releases
thnx a lot @SkinnyGeek1010
but unfortunatelly, I don’t see any difference or linked cause to this yet,…
do you see a relation to this here?
{
"stage": 0,
"env": {
// only enable it when process.env.NODE_ENV is 'development' or undefined
"development": {
"plugins": [
"react-transform"
],
"extra": {
"react-transform": [{
"target": "react-transform-hmr",
"imports": ["react"],
// this is important for Webpack HMR:
"locals": ["module"]
},
{
"target": "react-transform-catch-errors",
// the second import is the React component to render error
// (it can be a local path too, like "./src/ErrorReporter")
"imports": ["react", "redbox-react"]
}]
}
}
}
}not sure offhand but I can check it out tonight… Should I just pull the latest commit and then npm update the package.json to the newest versions? Or does it error out when just doing a npm install?
I just did
- git clone https://github.com/jedwards1211/meteor-webpack-react.git https://github.com/jedwards1211/meteor-webpack-react.git
- npm install
- node dev.js
I tried something ovious,… but… as expected, it didn’t help either.
npm update —save
npm update -g didn’t help
This may have been asked previously in this thread, if so I apologise. I did skim through but…
If you are developing packages for this approach would you be developing meteor packages with react components or npms?
1 Like
is your node and npm up to date?
I had to update npm.
I personally develop packages in NPM unless they are Meteor specific and will be shared with the public. If they’re private packages I just use NPM packages. In general I try and not use Atmosphere packages as much as possible (just a personal pref.).
Your skeleton is awesome. Congrats! Gonna use it for sure.
1 Like
You don’t have to require them all off the bat. You can require styles inside your components in the component will mount callback. Same with images. This means you are lazy loading your assets! They do require you to install loaders though. For example sass-loader. These assets are not handled by meteor so there’s no double refreshing.
just watched your video and it looks great. one question though, you said that on the server example files won’t get executed unless they’re imported. so does that mean you can pretty much write your meteor server code as usual and then just have a long list of imports in main_server.js that lists all of your server files?
1 Like
Pretty much. That’s whats happening on this line:
meteor-webpack-react/main_server.js at master · AdamBrodzinski/meteor-webpack-react · GitHub
However, if the other files need to export a variable then you would need to either A, expose a global, or B, export a variable/function/object that you can import later.
The big perk of using this setup is to use real modules so using globals intentionally is generally a bad idea. However, you’ll still use globals for accessing things like Meteor, Mongo, etc…
I see that in webpack bundle are react sources again. I want to use React package from meteor.
Universe modules npm allows me to make mixed dependencies and unnecessary dependencies are not attached to bundle.
check it out: https://atmospherejs.com/universe/modules-npm
Hi, I am may be missing a point, but,… I cannot use browser console to access the MongoDB.
What am I doing wrong? Or is this not supported in this setup (meteor+ webpack + react)
> Recipes.find()
results in
Uncaught ReferenceError: Recipes is not defined(…)
(anonymous function) @ VM19626:2
InjectedScript._evaluateOn @ VM19146:875
InjectedScript._evaluateAndWrap @ VM19146:808
InjectedScript.evaluate @ VM19146:664
You’ll need to expose a global variable to access it in the console/shell. This is also needed for Velocity testing as the entire Meteor ecosystem relies on Global variables.
You could do something like this:
// somewhere in lib
Globals = {};
// in your webpack code
const Recipes = new Mongo.Collection('recipes');
// exports for dev/testing
if (__DEV__) {
Globals.Recipes = Recipes;
}
// exports for webpack
export default recipies;
However I would go a step further to reduce boilerplate and use a utility function to expose the module:
function exposeInDev(moduleName, module) {
if (__DEV__) {
Globals[moduleName] = module;
}
return module;
}
Then you can just do this:
const Recipes = new Mongo.Collection('recipes');
// exposes as a side effect then return the module to be exported
//
export default exposeInDev('Recipes', Recipes);
2 Likes