Use Webpack with Meteor simply by adding packages (meteor-webpack 1.0 is out!)

[benoitt]

how can I achieve all code under if (Meteor.isServer) not to be shifted to client? Previous versions of webpack:webpack had this feature by default (as I remember), but now it’s not the default behaviour.

I guess I need to config webpack.json and add alias like “Meteor.isServer”: false, but I don’t know what exactly I should write.

Your Meteor.isServer and Meteor.isClient will be replaced by true or false. In production, this code will be removed by the minifier.

Isn’t still the case? Are you using an import with Meteor?

[benoitt]

Hey - yup I know but in my case I also want NOT to inline small images (when rendering emails from the server). I tried excluding paths with no luck. That’s why I fell back to file-loader.

You can set assets.limit to 0 in your webpack.json file.

Maybe I should document the whole thing in the webpack readme (or at least the core things) instead of having each package documented separately.

[imkost]

@benoitt,

I have this:

import { Meteor } from 'meteor/meteor';

if (Meteor.isServer) {
  console.log('this is server');
}

if (Meteor.isClient) {
  console.log('this is client');
}

And when I run meteor --production, I have this in js:

n.Meteor.isServer&&console.log("this is server"),n.Meteor.isClient&&console.log("this is client")

isServer / isClient are not replaced with booleans

UPD

Just tried to remove import { Meteor } from 'meteor/meteor' — server code is not served to client any more.

[benoitt]

Just tried to remove import { Meteor } from ‘meteor/meteor’ — server code is not served to client any more.

I’ll fix this in the next release. When you import it is transformed to something little bit different.

[efrancis]

I would love to support more loaders, plugins and settings that people are using with regular Webpack configs. I can add support to what everyone need. This is part of the feedback I’m hoping that have here!

I’d love to see a vue-loader package to support vuejs components with working hot reload. I’ve been playing around with vuejs this week and it’s stolen my heart, it combines everything I love about react with a much nicer API, and it has a core router and flux implementation so it brings a really nice all-in-one solution. thank you @evanyou!

[dbismut]

I might be over-complicating this but WOW, removing the react-runtime dependency from my project that was started with the huge app kickstart was a REAL pain.

I had to remove meteor-react-router and meteor-react-helmet and change them to normal npm dependencies. Then move meteor-react-ssr into my project to import react-router and react-helmet as a regular module (not as a package).

I’m still not done as I’m having one error in the browser in production mode that says webpackJsonp is not defined. I understand this is related to CommonsChunkPlugin and the common chunk not being loaded first, but I’m not sure what to do. (EDIT: I managed to make it disappear, but I’m now stuck with the infamous common.web.js:1 Uncaught TypeError: Cannot read property ‘call’ of undefined)…

But I’m close Anyway, thanks @benoitt, I’ve learned so much reading your code!!

[benoitt]

I managed to make it disappear, but I’m now stuck with the infamous common.web.js:1 Uncaught TypeError: Cannot read property ‘call’ of undefined

This is a weird one. Do you have some steps to reproduce or a repo I can watch?

[dbismut]

I would have to work on it, I’m in the middle of a big project… This seems to be related to the line:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

I’m still using your hugeapp code to create chunks:

export default {
  path: '',
  getChildRoutes(location, cb) {
    if (Meteor.isClient) {
      // Split the code on a different file when on a client
      require.ensure([], require => {
        cb(null, require('./routes').default);
      }, 'main');
    } else {
      // Save the chunk for server-rendering
      global.__CHUNK_COLLECTOR__.push('main');
      cb(null, require('./routes').default);
    }
  }
};

Would that still be it?

[benoitt]

I would have to work on it, I’m in the middle of a big project… This seems to be related to the line:

Try removing .default on your require. meteor-webpack automatically add a babel plugin for the default import:

export default {
  path: '',
  getChildRoutes(location, cb) {
    if (Meteor.isClient) {
      // Split the code on a different file when on a client
      require.ensure([], require => {
        cb(null, require('./routes'));
      }, 'main');
    } else {
      // Save the chunk for server-rendering
      global.__CHUNK_COLLECTOR__.push('main');
      cb(null, require('./routes'));
    }
  }
};

[dbismut]

It just shows ‘Not Found’ on the browser… .default is definitely there for the right reason

Here is what I get when printing WebpackStats:

{ 
   publicPath: '/assets/',
   assetsByChunkName: {
      main: [ 'web.js', 'style.css', 'web.js.map', 'style.css.map' ],
      producer: [ '1.web.js', '1.web.js.map' ],
      common: [ 'common.web.js', 'common.web.js.map' ]
   }
}

I don’t know. Banging my head on the wall right now.

[markoshust]

Thanks for your work and the update to look at npm’s react.

I’m now able to install, however my app isn’t running because it appears that files with a preceding slash are not loaded:

Module not found: Error: Cannot resolve 'file' or 'directory' /my-folder/my-file.js

[benoitt]

I’m now able to install, however my app isn’t running because it appears that files with a preceding slash are not loaded:

You need a babel plugin to be able to do this. You can create a .babelrc file in your root directory and set:

{
  "plugins": ["babel-root-slash-import"]
}

And make sure it is inside your package.json and it should work

[dbismut]

Hey @benoitt, I’m still on my issue. It looks like it comes from how I unbundled react-runtime from meteor-react-router-* since code splitting works fine when using your unmodified packages. I just have a question: is it possible to remove webpack:css and webpack:assets from webpack:webpack?

[benoitt]

I just have a question: is it possible to remove webpack:css and webpack:assets from webpack:webpack?

No you can’t ATM. Is there a missing setting that you need?

[dbismut]

Well, let’s say I’d want to override how webpack loads css? (again, adding postcss to the mix for example…)

[benoitt]

Well, let’s say I’d want to override how webpack loads css? (again, adding postcss to the mix for example…)

Most of the time your file extension would be different so it wouldn’t matter.

Settings css.postcss to true in webpack.json could activate it. Would it fix your problem?

[dbismut]

Not sure I understand, sorry, my postcss files have a regular css extension
Does that mean that I would have { css: { postcss: true } } in webpack.json? I’d then npm install --save postcss-loader?

I used to load postcss like this, as postcss loader (from what I understand) actually allows to use postcss regular plugins.

module.exports = {
  plugins: plugins,
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!postcss' },
    ]
  },
  postcss: function (webpack) {
    return [
      require('postcss-import')({ addDependencyTo: webpack }),
      require('postcss-cssnext'),
      require('postcss-at2x')
    ];
  }
};

[benoitt]

I used to load postcss like this, as postcss loader (from what I understand) actually allows to use postcss regular plugins.

This is the kind of settings I’m looking to support, thanks for sharing. I’ll look into how we can support that seemlessly.

[markoshust]

Thank you. I’m now getting an (odd) weird error. It appears it’s looking for files in the wrong spots (noticed the dupe base path).

I have a lot of lines (everywhere I have a preceding slash) that look like this:

ERROR in ./mymodule/imports/MyFile.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/markshust/Sites/mysite/Users/markshust/Sites/mysite/theme/imports/theme in /Users/markshust/Sites/mysite/mymodule/imports
 @ ./mymodule/imports/MyFile.jsx 31:13-139

update: screw it, i’m just getting rid of preceding slash. causes issues in my ide anyways.

[benoitt]

Thank you. I’m now getting an (odd) weird error. It appears it’s looking for files in the wrong spots (noticed the dupe base path).

I have a lot of lines (everywhere I have a preceding slash) that look like this:

It might be a problem with files within a import folder. I’ll make some tests.