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

zaiban · March 18, 2016, 6:06pm

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!

benoitt · March 18, 2016, 9:30pm

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.

norBu · March 18, 2016, 10:14pm

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

benoitt · March 19, 2016, 12:53am

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

serkandurusoy · March 19, 2016, 12:08pm

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:

Explain what webpack:webpack does and why we should use it
Explain what gadicc:ecmascript-hot does and why we should use it
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

gadicc · March 19, 2016, 12:48pm

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

jeremybyu · March 19, 2016, 7:55pm

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:

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

Now for webpack

meteor add webpack:webpack
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)
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.

asclepius · March 19, 2016, 8:36pm

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?

fvg · March 20, 2016, 12:03am

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.

fvg · March 20, 2016, 1:39am

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'?

benoitt · March 20, 2016, 4:31am

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

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.

fvg · March 20, 2016, 11:22am

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.

efrancis · March 20, 2016, 6:56pm

@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 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

asclepius · March 21, 2016, 6:54pm

Awesome, thanks @benoitt! Just for completeness, these are the 3 issues I’ve run into when deploying to Galaxy.

CSS Import doesn’t find loader when building for production. ( #110 & #107 exist for followers)
Running build with the --architecture=os.linux.x86_64 flag or when deploying to Galaxy throws an error: app is not compatible with architecture 'os.linux.x86_64'. The app is being built and deployed from OSX. (can be recreated with kickstarter-meteor-react w/o css)
Some node_modules not found locally while building for production or attempting deployment. I’m experiencing this with a local personal project. I’m not sure where these dependencies are coming from, they are not directly included in package.json or in project code. I will try to recreate this issue in an sample project.

While processing files with webpack:webpack (for target os.linux.x86_64):
fs.js:666:18: ENOENT, no such file or directory
'/Users/username/projectname/node_modules/qq/'

The package otherwise works great, all runs smoothly when running in development locally. Keep up the great work, Cheers!

jeremybyu · March 22, 2016, 1:10am

Thanks for the response and your work on this great package. In the end I made my own webpack.conf.js file to use with webpack and it seems to be working well. It seems that file actually overrides much of the webpack configuration so I had to manually create all my loaders. In other words if I override the css loader, I need to override the js loaders as well.

I have a working angular, webpack, meteor integration that utilizes the popular ng6 starter pack (uses webpack, and angular 1.5 components). If anyone’s interested they can see the repo here.

Thanks again benoitt. I’ll see if I can make a pull request to make an webpack:angular package if you would like.

benoitt · March 22, 2016, 2:45am

I’m on it this week. I’ll try to keep this thread up-to-date

That would be seriously amazing. Adding angular support would be huge.

dinos · March 23, 2016, 2:52am

Is there already a loader for css modules?

juliancwirko · March 23, 2016, 9:44am

webpack has built in css modules support and here I supose you just need to add css.module: true in your webpack.json file. (Correct me if I’m wrong)

dinos · March 24, 2016, 2:46am

I just want to second the sass error:

ERROR in ./imports/client/_screens/lists/_Header.jsx
Module not found: Error: Cannot resolve module 'undefined' in /Users/dinos/development/rise/app/imports/client/_screens/lists
 @ ./imports/client/_screens/lists/_Header.jsx 23:18-47
=> Started your app.

Can you maybe provide a webpack.config.js boilerplate? Did it change to the previous one? I think the package-based idea is great - but using loaders etc from the rest of the ecosystem is hard to debug without running it via a real config.

benoitt · March 25, 2016, 11:03am

This is a bug in webpack:css I need to fix (will keep you up-to-date). No need to worry about debugging the config, there is not much to do.