Howto? Meteor Webpack 2 w/o legacy meteor-webpack


#1

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


#2

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.


#3

FWIW, I successfully manually worked-around the aforementioned meteor-client-bundler glitch and created a Webpack2 configuration that works with Angular-Meteor.


#4

Do you have it published on github so I could use your work to try and figure out a webpack2 meteor react setup?


#5

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 .


#6

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

#7

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.


#8

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!


#9

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.


#10

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


#11

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.


#12

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)


#13

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?