Are there any good tutorials or repos on github for this? I haven’t been able to find it yet - not a big surprise since webpack2 just became official recently.
I’ve been using @eXon 's great https://github.com/thereactivestack/meteor-webpack for a while now to do meteor react development but now that webpack2 has come out and thereactivestack is legacy and using webpack1.3 it seems like a good time to figure out how to do webpack2 with meteor via npm instead of atmosphere.
Appreciate your guidance on this anyone!
Here’s my progress so far -> https://github.com/Falieson/MeteorWebpack2ReactTDD
server/build/webpack.js using webpack-blocks example
module.exports = createConfig([
entryPoint('./src/main.js'),
setOutput('./build/bundle.js'),
babel(),
postcss([
autoprefixer({ browsers: ['last 2 versions'] })
]),
defineConstants({
'process.env.NODE_ENV': process.env.NODE_ENV
}),
// env('development', [
// devServer(),
// devServer.proxy({
// '/api': { target: 'http://localhost:3000' }
// }),
// sourceMaps()
// ])
])
I think the package.json needs to be updated from
"scripts": {
"start": "meteor run"
},
to hit webpack like in the webpack2 guide it says:
"scripts": {
"start": "webpack --config mywebpack.config.js"
}
Not sure what to do next … I started using meteor b/c I wanted to focus on frontend development but it seems inevitable that I have to figure this out now that npm is preferred to atmosphere.
~ Falieson
3 Likes
I am trying to figure out the same thing but for an Angular front-end rather than React. I made some progress with a Webpack configuration that bundles and serves the dismembered client from the Angular-Meteor angular2-boilerplate, but I am running into a roadblock properly providing the Meteor Atmosphere packages. I have used the meteor-client-bundler referenced in the Angular-Meteor WhatsApp Clone tutorial to bundle the Atmosphere packages into a single file to import, but the bundled app crashes on load with Uncaught ReferenceError: Mongo is not defined.
1 Like
FWIW, I successfully manually worked-around the aforementioned meteor-client-bundler glitch and created a Webpack2 configuration that works with Angular-Meteor.
Do you have it published on github so I could use your work to try and figure out a webpack2 meteor react setup?
I cleaned up my efforts a bit and shared them in the Angular-Meteor-Webpack repository on my GitHub account. Much of the Webpack2 configuration is specific to Angular, but hopefully the source combined with the History I documented in the ReadMe will give you enough to go on, @Falieson .
Thank you very much @KeithGillette for providing this repository. I think its brought me a lot closer to getting a React version going! Here’s my fork: https://github.com/Falieson/React-Meteor-Webpack2
unfortunately - no success yet!
The errors I’m getting are: client/main.jsx - my webpack aliases don’t seem to be loading here, but are inside the imports/ui/ directory. weird :-/
And my client/main.jsx doesn’t seem to be getting build though in webpack.config.js I have
{ // QUESTION: shouldn't this be loading the jsx?
test: /\.js$/,
exclude: [/node_modules/, /meteor/],
loaders: ['babel-loader'],
},```
error:
ERROR in ./client/main.jsx
Module parse failed: ~/React-Meteor-Webpack2/client/main.jsx Unexpected token (26:4)
You may need an appropriate loader to handle this file type.
| function appRoot() {
| return (
| <div className="app-container">
| <Provider store={Store()}>
| {renderRoutes()}
@ multi (webpack)-dev-server/client?http://localhost:8080 ./client/main.jsx
I am glad the example proved somewhat useful, @Falieson. Since I have no experience with React, I’m not going to be of much help with the JSX parsing errors. It looks like they may arise from a configuration issue that is not be Meteor-related, so you may find better resources to overcome the problem on StackOverflow or a React-specific forum.
Since I’m using Angular, my work solving the meteor-client-bundler glitch I was experiencing allowed me to move to Angular CLI for building and development serving, which still uses Webpack 2 “under the hood” but avoids the (in my experience) complicated and fragile Webpack configuration.
So I did more research over the weekend and came across https://github.com/jcoreio/crater - a pretty ideal spec for what I’m looking for - unfortunately cloning the repo it didn’t build out of the box. So I continued my search…
And landed in herectic seas. I think going forward I won’t be using Meteor b/c of Isobuild, and instead use https://github.com/kriasoft/react-starter-kit
- Reactivity? Check - MDG’s Apollo GraphQL!
- Webpack2? Check - and flowconfig and babel and eslint setup
- Enzyme? Check - Ready to go for TDD
- Router? Check - React/Redux Router and Page Head Meta changes (meteor requires an additional package to change the head)
And how about BrowserSync! that’s such a nice builtin addon.
13k stars, 800 Commits. I’m sold!
why are you trying to use Webpack with Meteor? Is it the code splitting?
I would honestly just develop in Node and Express. Probably easier that way.
Why use Webpack w/ Meteor? I first started to use webpack w/ Meteor around the time I was learning redux a year ago, I don’t remember the reasoning anymore - I’m sure someone in the Meteor gitter told me to go down that path for a good reason. Since working professionally in React, I use webpack2 at work.
I’m reminded of this article from the founder of Kadira: https://voice.kadira.io/its-time-thank-you-bye-meteor-115dd649a8#.sb830hk4v
Makes me sad that Meteor is being passed over by NextJS and RSK but there isn’t a better decision I can think of if I want to work with my friends (non of whom jumped on the Meteor train despite my incessant promoting).
Nah, the last line is completely false and outdated.
In fact, Meteor has recently made some big time hires that will work exclusively on Meteor. I think Ben Newman is one of those people.
There is no reason to use Webpack with Meteor, since Meteor already does all the bundling itself. I don’t see any reason why you would use it with Meteor. Webpack is disgusting and complicated in and of itself. I really hate HATE it, even though it’s a great tool with a lot of great features.
I work with react and meteor for about two years now. My experiences with webpack started about two weeks ago. And yes, I also don’t like it.
But unfortunatly I have to find a solution for a current project to ensure, the scripts sent out by the server are the same that are received by the client. As far as I know the best way to do this is at the moment to use Subresource Integrity, already supported by firefox and chrome. Because there is only 1 forum post and 1 issue for SRI it seems I have to find another solution to get SRI working, like webpack with SRI plugin (not working yet)
Back when I started using meteor-webpack, the rationale was the hot-module-reload on React components. Not just refreshing the page on file change, but updating the code in place so it looks different. Super helpful for front-end development, the reload is significantly faster than Meteor’s.
Did anyone ever get a good homegrown setup working that combined Meteor w/ webpack 2?