Adding custom loaders (working in dev but not prod)

[gdub01]

I'm adding postcss as a custom loader in webpack.config.client.js like:

  {
    test: /\.css$/,
    loader: 'style-loader!css-loader?modules!postcss-loader'
  },
],

}, postcss: [ require('postcss-cssnext'), require('lost') ],

then I found I had to do it again in webpack.config.client.dev.js but I didn't need the extra postcss bit at the bottom like:

  {
    test: /\.css$/,
    loader: 'style!css-loader?modules!postcss-loader',
    exclude: /node_modules|lib/,
  },

and that works fine with node dev.js

But... when I run prod.js and visit localhost it says there's an error (but doesn't say what error because it's prod)

And when I deploy that same prod version to meteor.com, the error logs from meteor say that the error is Meteor can't find AWSAccessKeyId which is something the Meteor package Slingshot requires.

So, Meteor is finding that key fine in dev and I have that key in prod.json as well. I can only think there's something wrong with the way I'm using the loaders that throws an error before meteor has a chance to access those keys? I don't know.

[jedwards1211]

So if I understand this correctly, before you added in the postcss loader, you didn't see that error when running prod.js?

[gdub01]

Admittedly I've not attempted to run prod.js until recently so I don't know when the error originated.

Also, it's a bit of a stretch for me to think custom loaders is the problem.. but I know without putting them in both webpack.config.client.js and webpack.config.client.dev.js my app throws errors.

Anyways, I tried removing my custom loaders altogether and edited my app until it stopped throwing errors without them in dev. Then I ran prod.js again and still it doesn't work. Just sits at that 'loading...' screen.

Is there a way to run the 'uniminified' version in prod.js so it'll throw errors? I tried removing 'run --production' from prod.js but that didn't seem to do it.

[AdamBrodzinski]

You can remove the uglifier plugin in the prod config (below). You may want to experiment with removing the things that are different in the prod/dev configs.

Also can you confirm that the settings json file is loaded? (by logging out or something).

https://github.com/jedwards1211/meteor-webpack-react/blob/master/webpack/webpack.config.server.prod.js#L12-L14

[gdub01]

Thanks! I tried removing the uglifier and a few other plugins. No luck yet but I'll keep trying.

settings/devel.json is loaded in dev. I can login/logout/upload stuff.

I can't do anything running prod however, so I unfortunately can't confirm if settings is loaded. The app doesn't load at all

[gdub01]

I'm using css modules so I have one css file per component often. Anyways, in the head chrome is showing a bunch of css files... they weren't combined. Is that expected behaviour?

This is what I'm looking at after running prod.js... no errors in compilation:

[gdub01]

When I deploy to meteor and run the logs:

Gavins-MacBook-Pro:meteor_core Gavin$ meteor logs demo-saas-app.meteor.com

[Tue Oct 20 2015 13:00:09 GMT+0000 (UTC)] INFO STATUS null -> starting [Tue Oct 20 2015 13:00:09 GMT+0000 (UTC)] NOTICE Starting application on port 24607 [Tue Oct 20 2015 13:00:09 GMT+0000 (UTC)] INFO STATUS starting -> running [Tue Oct 20 2015 13:00:10 GMT+0000 (UTC)] WARNING /meteor/dev_bundles/0.5.14/lib/node_modules/fibers/future.js:245 throw(ex); ^ Error: Match error: Missing key 'AWSAccessKeyId'

That's as far as I get in production. It doesn't run at all locally and doesn't throw errors. I've had no luck modifying the custom loaders. Even without them the app doesn't work it looks like.

I've also tried deleting all the plugins below except JSON.stringify('production') and no luck.

plugins: (config.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production'), }), new webpack.NoErrorsPlugin(), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.AggressiveMergingPlugin(), new webpack.optimize.OccurenceOrderPlugin(true), ]),

[AdamBrodzinski]

Hmmm can you try temp. Removing the prod Json file to see if you get the same error or a new error?

Also can you confirm your aws key for prod is correct? It may throw if it's invalid

[gdub01]

Thanks for your help! I removed the prod.json file and it threw a new error saying it couldn't find prod.json when compiling prod.js

Then I put it back but just deleted the AWS key/values from prod.json and I got the same error as meteor.com logs saying it can't find the keys.

Finally I put the correct key values in and it prod.js compiled fine, but it's stuck at 'loading..' on localhost:3000 with no specific error and deploying to meteor.com crashes with logs saying it can't find the keys.

I'm using the exact same key/values on dev as prod for AWS so I know the keys work as I can upload files to s3 correctly on dev.

[AdamBrodzinski]

Hmmm i'm stumped. Couple more things (taking a stab in the dark)...

• deploy to meteor.com in debug mode (dev mode) using dev settings to mirror your dev env.
• comment out the AWS init so it doesn't ask for the keys (and/or remove the package) to see if it deploys

This may narrow down if something else errors out if they're no AWS error, or works in devel mode on meteor.com.

Another project I have (non webpack) won't deploy to meteor.com on CodeShip and errors with Sass because of some difference but deploys on my local machine.... I know the frustration!

[gdub01]

RESOLVED! =) Thanks for your help!

There was 2 completely separate issues:

1. When running prod.js, for whatever reason react router was trying to load the app before the dom was ready... but the same issue didn't occurr running dev.js.

Anyways, I wrapped react router in Meteor.startup() and it now works.

To get the error message to display I temporarily removed env('production') from prod.js so react would run unminified which gave me the clue as to the problem.

Issue 2 is meteor.com couldn't find AWS keys. Once I got my app working on localhost I saw I could use the keys correctly even running prod.js.

The problem was deploying to meteor... Meteor wanted this line:

meteor deploy demo-saas-app.meteor.com --settings ../settings/prod.json

from the meteor_core dir. I think for the deploy scripts they should be

exec('meteor deploy ' + projectName + '.meteor.com' + ' --settings ../settings/prod.json ', {async: true});

But if I'm the only one having problems, maybe no. Think I should do a pull request for that line? (all I did was add the --settings ../settings/prod.json ) part. I know it's there in prod.js too but I think meteor.com needs it again.