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

announce
103

Yes you can use local packages. And you can access the global variables they export or import them if you’re on 1.3

104

Is there a tutorial somewhere on how to use webpack with Blaze?

105

Not ATM, could be a great idea to do.

You can create .html files for your Blaze templates anywhere FYI.

106

Heres a simple repo with Vue-Webpack-Meteor and Vue Router. However I cant get hot reload to work as well. Actually I can not even get a regular live reload to work. I have to manually refresh the page.

107

Yeah I saw the same thing, I got it to work by modify the webpack:webpack package’s WebpackCompiler class to just always add the HMR plugin with
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());. Then HMR works alright, but if you’re on a page and HMR updates a component, then you navigate to another route and back, the changes that were done with HMR are gone. If anyone knows why HMR changes would be lost when navigating between routes, some help would be appreciated

108

Any chance there is an example of Flow-router + code splitting? Trying to wrap my head around it.

1 Like
110

Spent some more time and was able to figure out code splitting using the react-router and the new webpack package mentioned here. Not sure if it will work with Flow-Router at all and may continue to try in the future.

Ran into an issue where --production was giving me errors. Will be troubleshooting that tonight and report back if successful or if help is needed.

111

Hello. Wasted hours trying to get .scss files to work with webpack:sass, finally gave up and made account here to ask for some help.

I’m getting the error “Module not found: Error: Cannot resolve module ‘undefined’” when trying to “import ‘./index.scss’” in my client file. Tried including the path in different formats but to no avail.

Importing regular .css files works fine.

Thanks!

112

Hi zaiban

I’m sorry you wasted so much time on this. I’m pretty sure this is because you haven’t all the last version of webpack:webpack and webpack:css. Make sure they are > 1.1. If it can’t update, remove the package and re-add it. I know Meteor sometimes think versions are incompatibles but they are not.

113

Hi, it is possible to use the webpack package in a meteor package?

114

No it is not. Most people would rather build a solid folder structure inside their project or create NPM packages.

115

For those of us who are not very familiar with webpack, hot reloading, code splitting, “native” meteor support for all these etc, could someone please:

  1. Explain what webpack:webpack does and why we should use it
  2. Explain what gadicc:ecmascript-hot does and why we should use it
  3. How does one compare to the other and what are possible reasons for a dev to choose one over the other and if those reasons would change per project

Obviously, this is a cross-post on two very related topics, so please bear with me as this is not spam but a genuine call for some explanation in layman terms.

Thanks :slight_smile:

2 Likes
116

Let’s continue the above in What is hot reloading and code splitting; webpack:webpack vs ecmascript-hot.

1 Like
117

I am trying to use Meteor 1.3, webpack, and angular. I have about 90% of it working but I need help with few things.

Heres how I set it all up so far:

  1. Meteor create new package
  2. Update meteor to new 1.3 rc-3 (im actually using beta.12, but see now reason that rc3 wont work)
  3. meteor remove ecmascript
  4. meteor add modules
  5. npm install angular angular-meteor --save
  6. meteor remove blaze-html-templates
  7. meteor add static-html

Now for webpack

  1. meteor add webpack:webpack
  2. meteor add webpack:react (i know, i know…its just so I can compile my es6/es7 code in .js files, totally open to other suggestions)
  3. then npm install

Now I can import angular and angular-meteor modules and that all works great. I make one index.html file that has this

<head>
  <title>ng6-test</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>
  <app></app>
</body>

This is a place for angular to render too, the app component. However heres the problem that I am running into for my app component:

import controller from './app.controller'
import template from './app.html'

let appComponent = {
  restrict: 'E',
  bindings: {},
  template: template,
  controller,
  controllerAs: 'vm'
}

export default appComponent

I want to import the template as html. Of course webpack can do that with its html loader, which we have a package for. The problem is that Meteors static-html package is also looking at this simple html file (just a div) and throwing errors (its looking for head, body, and template tags)! I only want static-html to work on just index.html, so angular will have a component to load to. I have tried putting my angular code in an imports folder because I thought that would hide it from meteors build process, however that does not work.

So to sum of heres the problem I have. I need static-html so I can make a place for my angular app to render. However it causes errors for any external angular templates (html files). What I would really like is to some how remove static-html and just have webpack somehow tell meteor to load the component on the body…

EDIT: In the meantime I’m using a jade loader. I write the template in jade and return the html.

118

Many thanks @benoitt for this great package. I’ve grown very fond of it and have already started converting several projects over fully.

I did however run into issues when trying to deploy to Galaxy. When starting with clean state and trying to deploy kickstarter-meteor-react I receive the following error:

Module parse failed: TodoApp.import.css Line 2: Unexpected token { You may need an appropriate loader to handle this file type.

On several of my other projects I receive errors of missing node modules. (deeper dependencies, not ones directly included in package.json)

Does anyone know what the cause / workaround to these issues? Has anyone else been successful in deploying to Galaxy?

119

I’ve just started a new app with the latest 1.3-rc and webpack:webpack. When I open the app in the browser (localhost:3000) I see something like (mocha?) test results. Where’s that coming from?

Edit: It seems to be coming from practicalmeteor:mocha, which was added by default. But why does this screen show up? This didn’t happen without webpack:webpack.

120

One more thing: Imports in 1.3 work with a slash (/) at the beginning, webpack doesn’t seem to like them. Is there a way to make these work with webpack, so I can have
import { Users } from '/lib/collections' instead of
import { Users } from 'lib/collections'?

121

Using webpack:html you can import HTML files with Webpack. I understand the problem you’re having with HTML files, it’s the same problem CSS files have and why we use .import.css. I’ll look for an extension we can use for .html files we want to import so that it doesn’t have a conflict with static-html

I’m sorry about this bug. It’s one on my priority list :slight_smile:

You can use the babel plugin babel-root-slash-import. I didn’t though it was also included in Meteor 1.3. Maybe we should consider adding it by default for everyone.

122

I’ve added "babel-root-slash-import": "^1.0.0" to my package.json file and created a .babelrc file which contains { "plugins": ["babel-root-slash-import"] }, but get the same error.

123

@benoitt I was about to put together a PR for updating the webpack package to support HMR for vue but it looks like you fixed the issue, so thanks :thumbsup: the one other obvious change the vue package needs is that vue is set as a devDependency but it should just be a dependency. there’s still the weird issue where HMR works fine, but if you navigate to another route and then back, the HMR changes are lost. I’m at a loss as to why, been playing around with it for a week now