Webpack resolves browser package module by default

[dobromir-hristov]

OK so I am writing this so other people dont waste hours like me.

Issue

Your function works when you manually tested and with simple express server, but throws errors in both serve and build modes of netlify-lambda.

Possible Cause

It may be that one of the dependencies has a browser field defined in its package.json (could be indirect dep), which in most cases is not compatible with Node, but Webpack by default prefers it over main or module definitions.

Solution

Create a webpack.functions.js file in with a modified resolver, so it skips the browser bundle

module.exports = {
  resolve: {
    mainFields: ['module', 'main']
  }
}

Then run your command

netlify-lambda serve functions --config ./webpack.functions.js

[swyxio]

whoa, wtf! good to know. ANY dependency with 'browser' field will cause this? maybe we should add mainFields inside of netlify-lambda somehow.

[dobromir-hristov]

Pretty much :) They are not meant for Node. There is also a node main field, but I dont think its used as much.
I think the correct order might be module, node, main as main is usually a UMD, module being a ESM and node a CJS format.

[dobromir-hristov]

I can make a PR, if you think this wont break people's code (which I dont think it should).

[swyxio]

pr welcome. this is unfortunately just a result of us using webpack for something it wasn't strictly designed to do

[glweems]

fixed problem for me!
Thank you!!

[swyxio]

glad to hear. if you can think of a way to build it into netlify lambda i am all ears. this one seems nasty.

[dobromir-hristov]

We just need to tweak the default config. I had forgotten about this, will see what can be done :)