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

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.

jeremybyu · March 25, 2016, 8:23pm

Just added a pull request for angular support. Heres the link. The package works for me but I doubt it covers everyones use case with angular and meteor. The readme has more info on how to use it.

I also ran into issues with Module not found: Error: Cannot resolve module 'undefined'. I googled it and it took me to this issue in your repository. I simply upgraded webpack:css to 1.1.0 and it worked.

P.S when I git clone your repo in windows it fails with this:

fatal: cannot create directory at 'packages/webpack/.npm/plugin/webpack:webpack': Invalid argument 
warning: Clone succeeded, but checkout failed.```
 
I had to develop on my linux vm, I think its the colon in the file name thats the issue.

dinos · March 25, 2016, 10:41pm

No, I mean: I reather use a normal config file and add loaders etc. manually. But I don’t know how a “normal config file” looks now for webpack:webpack - there is no example. I guess I would not need a " out dir" also, how to differentiate between client and server. Etc.

For that, a sample config file would be great. I think the package based approach is great - but not for a large intertwined project.

PS: Look forward to the fix. Could really use sass and postcss!

benoitt · March 29, 2016, 11:44am

Everything should be fixed if you update!

I understand how you feel about your webpack.config.js files. I though the same at first, I though there is no way I can configure my webpack with something as simple as this.

The truth is you probably can. I’ve upgraded huge projects without any problems.

But if you REALLY want to use webpack.config.js files because you’re in love with the flexibility (I’m not, I’m in love with simplicity ), you can always add a webpack.config.js file in your project and add any setting you would like. I’m working on a better doc for this, sorry about that.

dinos · March 29, 2016, 2:32pm

Great! So the webpack.config.js is basically the same to the huge-app example? Really look forward to updated docs.

Well, its obvious that it’s much simpler to implement, test and try loaders - or combinations of them - with a single webpack config file. Especially if it’s nothing generic.

To translate all that always into individual packages is a very complicated and potentially confusing process than just writing - or even copy and pasting - into a file that external developers immediately understand, without any knowledge of meteor.

jeffshaver · April 1, 2016, 1:47am

@benoitt Sorry for the long error, but… No idea what this means or how to fix this… Any ideas?

SyntaxError: Unexpected token /k:webpack…
at Object.parse (native)
at config (eval at readPackageConfig (packages/webpack:webpack/plugin/WebpackCompiler.js:279:28), :37:26)
at packages/webpack:webpack/plugin/WebpackCompiler.js:300:26
at Array.forEach (native)
at Object.load (packages/webpack:webpack/plugin/WebpackCompiler.js:298:15)
at WebpackCompiler.processFilesForTarget (packages/webpack:webpack/plugin/WebpackCompiler.js:110:13)
at bottom_mark (/tools/utils/parse-stack.js:59:14)
at /tools/isobuild/compiler-plugin.js:186:13
at /tools/utils/buildmessage.js:359:18
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:352:34
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:350:23
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at Object.enterJob (/tools/utils/buildmessage.js:324:26)
at /tools/isobuild/compiler-plugin.js:175:22
at Function.time (/tools/tool-env/profile.js:305:10)
at /tools/isobuild/compiler-plugin.js:174:15
at Function..each..forEach (/Users/jeff/.meteor/packages/meteor-tool/.1.3.0_3.8m1jlc++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/underscore/underscore.js:87:22)
at CompilerPluginProcessor.runCompilerPlugins (/tools/isobuild/compiler-plugin.js:164:7)
at ClientTarget.runCompilerPlugins (/tools/isobuild/bundler.js:898:22)
at /tools/isobuild/bundler.js:674:34
at /tools/utils/buildmessage.js:359:18
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:352:34
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:350:23
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at Object.enterJob (/tools/utils/buildmessage.js:324:26)
at ClientTarget.make (/tools/isobuild/bundler.js:668:18)
at /tools/isobuild/bundler.js:2509:14
at /tools/isobuild/bundler.js:2599:20
at Array.forEach (native)
at Function..each._.forEach (/Users/jeff/.meteor/packages/meteor-tool/.1.3.0_3.8m1jlc++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/underscore/underscore.js:79:11)
at /tools/isobuild/bundler.js:2598:7
at /tools/utils/buildmessage.js:271:13
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:264:29
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:262:18
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:253:23
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at Object.capture (/tools/utils/buildmessage.js:252:19)
at Object.exports.bundle (/tools/isobuild/bundler.js:2490:31)
at /tools/runners/run-app.js:591:36
at Function.run (/tools/tool-env/profile.js:489:12)
at bundleApp (/tools/runners/run-app.js:581:34)
at AppRunner.runOnce (/tools/runners/run-app.js:634:35)
at AppRunner.fiber (/tools/runners/run-app.js:887:28)
at /tools/runners/run-app.js:411:12
webpack built 40a078f02b808d1704e9 in 15215ms
SyntaxError: Unexpected token /k:webpack…
at Object.parse (native)
at config (eval at readPackageConfig (packages/webpack:webpack/plugin/WebpackCompiler.js:279:28), :37:26)
at packages/webpack:webpack/plugin/WebpackCompiler.js:300:26
at Array.forEach (native)
at Object.load (packages/webpack:webpack/plugin/WebpackCompiler.js:298:15)
at WebpackCompiler.processFilesForTarget (packages/webpack:webpack/plugin/WebpackCompiler.js:110:13)
at bottom_mark (/tools/utils/parse-stack.js:59:14)
at /tools/isobuild/compiler-plugin.js:186:13
at /tools/utils/buildmessage.js:359:18
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:352:34
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:350:23
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at Object.enterJob (/tools/utils/buildmessage.js:324:26)
at /tools/isobuild/compiler-plugin.js:175:22
at Function.time (/tools/tool-env/profile.js:305:10)
at /tools/isobuild/compiler-plugin.js:174:15
at Function..each..forEach (/Users/jeff/.meteor/packages/meteor-tool/.1.3.0_3.8m1jlc++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/underscore/underscore.js:87:22)
at CompilerPluginProcessor.runCompilerPlugins (/tools/isobuild/compiler-plugin.js:164:7)
at ServerTarget._runCompilerPlugins (/tools/isobuild/bundler.js:898:22)
at /tools/isobuild/bundler.js:674:34
at /tools/utils/buildmessage.js:359:18
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:352:34
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:350:23
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at Object.enterJob (/tools/utils/buildmessage.js:324:26)
at ServerTarget.make (/tools/isobuild/bundler.js:668:18)
at /tools/isobuild/bundler.js:2538:14
at /tools/isobuild/bundler.js:2606:20
at /tools/utils/buildmessage.js:271:13
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:264:29
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:262:18
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at /tools/utils/buildmessage.js:253:23
at [object Object].withValue (/tools/utils/fiber-helpers.js:89:14)
at Object.capture (/tools/utils/buildmessage.js:252:19)
at Object.exports.bundle (/tools/isobuild/bundler.js:2490:31)
at /tools/runners/run-app.js:591:36
at Function.run (/tools/tool-env/profile.js:489:12)
at bundleApp (/tools/runners/run-app.js:581:34)
at AppRunner._runOnce (/tools/runners/run-app.js:634:35)
at AppRunner._fiber (/tools/runners/run-app.js:887:28)
at /tools/runners/run-app.js:411:12

arunoda · April 1, 2016, 3:30am

Guys, just wanna hijack this thread

But, I assume this is related since we wanna develop/design UI component very fast.
That’s what we are doing with the React Storybook.

It’s tool that runs outside your app, but allow you to work on your UI components and build them as you want. It’s based on Webpack and supports HMR and many cool features.

Have a look at here: Introducing React Storybook

dinos · April 1, 2016, 8:25am

@arunoda Interesting! (Edit - just saw your round trip to all the repos… duh - I understand the fork - I even was thinking about it) Could we merge visual testing aka http://www.uiharness.com - webpack based visual testing framework

benoitt · April 1, 2016, 9:43am

What webpack packages are you using and what are your settings?[quote=“arunoda, post:136, topic:18819”]
But, I assume this is related since we wanna develop/design UI component very fast.That’s what we are doing with the React Storybook.
[/quote]

Looks really cool, I’ll certainly try that out.

darkadept · April 1, 2016, 7:15pm

I’m testing out your webpack:webpack package but I’m running into an issue with SemanticUI. I started with the kickstart-meteor-react-router pacakge.

I’m using the Atmosphere semantic:ui meteor package. It seems to load all the CSS properly but when I try to do a $(element).sidebar() from a componentDidMount() I get this error:

Uncaught TypeError: $(...).sidebar is not a function

It seems like Semantic isn’t loaded?

voiceup · April 1, 2016, 7:46pm

I ran into the similar situation. Couldn’t find the original github issue that I found the answer, but you need to do import like this:

$ = require('jquery');
$.fn.popup = require('semantic-ui-popup');
$.fn.transition = require('semantic-ui-transition');

darkadept · April 1, 2016, 8:25pm

That’s a bit fiddly, isn’t?

I actually got it going with the semantic-ui npm package instead of the meteor package.

raycone · April 1, 2016, 9:21pm

Hi,
I’m using latest webpack:webpack with Meteor 1.3. Trying to import Meteor exports like:
import { Meteor } from ‘meteor/meteor’;
doesn’t work. It throws an error: Module not found: Error: Cannot resolve module ‘meteor/meteor’

Does webpack:webpack need any configuration so it can find the module or how can make importing Meteor exports to work?

dinos · April 2, 2016, 11:03am

Could be wrong syntax, depending on Babel stage, there is no named meteor export.

Try either
import Meteor from 'meteor/meteor’
or
import * as Meteor from ‘meteor/meteor’

But better is to just require the methods you need. ‘meteor/collection’, ‘meteor/tracker’ etc