Problem building lambda function

I am getting the error:

 npm run build:lambda

> marvel@0.1.0 build:lambda
> netlify-lambda build src/utilities/lambda --config ./webpack.lambda.js

netlify-lambda: Building functions
[
  ModuleParseError: Module parse failed: Unexpected character '#' (48:1)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  |
  |     /** @type {Array.<(Blob|Uint8Array)>} */
  >     #parts = [];
  |     #type = '';
  |     #size = 0;

I’m using create-react-app. I also have an extra webpack file “webpack.lambda.js” I run on lambda build:

module.exports = {
  optimization: {minimize: false},
  devtool: "source-map",
  target: "node",
}

Hey there, @ShaCP :wave:

Thanks for reaching out. Can you please share your site name and your function name?

Hi hillary (noted about PMs, just didn’t want to post the info you asked here)

Looks like the issue was a newer version of the node-fetch package. Reverting back to 2.6.1 fixed this issue. Still don’t know why it doesn’t work with the newer version though.

1 Like

Hi @ShaCP,

Any specific reason why you’re using netlify lambda instead of letting Netlify bundle functions automatically using zisi or esbuild?

@hrishikesh Because I wanted to use syntax such as “import”.

You can do it using esbuild.

netlify.toml:

[functions]
  node_bundler = "esbuild"

Ok, I have switched to esbuild. I’m not sure about the configuration though.

With netlify-lambda, I followed the docs and this is what I did:

netlify.toml:

[build]
command = "npm run build"
functions = "lambda"
publish = "build"

package.json

    "build:lambda": "netlify-lambda build src/utilities/lambda --config ./webpack.lambda.js",
    "debug": "netlify dev --inspect"

webpack.lambda.js

module.exports = {
  optimization: {minimize: false},
  devtool: "source-map",
  target: "node",
}

This all worked for me as explained in the netlify-lambda docs.

How can I do this with esbuild? I removed from all the code everything that is netlify-lambda specific to make sure I didn’t have unnecessary code. (including functions = "lambda" , I don’t see a function property mentioned outside of the netlify-lambda docs.

Then I added:

[functions]
node_bundler = "esbuild"

According to the docs:

The following property applies for all Netlify Functions:

directory: a custom path to your serverless functions. The default location is YOUR_BASE_DIRECTORY/netlify/functions

So I added this to netlify.toml under functions

directory = "src/utilities/lambda/"

With this config, Netlify Dev works. But it won’t let me step through the code like when I used netlify-lambda. A source map issue?

This was my vscode configuration that worked with netlify-lambda?

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Netlify Debugging",
            "type": "pwa-node",
            "request": "launch",
            "program": "${workspaceFolder}\\node_modules\\.bin\\netlify",
            "runtimeArgs": [
                "run-script",
                "debug"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "sourceMapPathOverrides": {
                "webpack:///./*": "${workspaceFolder}/src/utilities/lambda/*",
            },
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ]
        }
    ]
}

What do I need to change?

Also, although the function is working with Netlify Dev, it’s not being included in the production build. “npm run build” doesn’t build the function.

Lastly, just FYI when I run netlify dev, the function is being built here:
.netlify\functions-serve\apiRequest\src\netlify\functions\

There’s nothing you need to do. Once you’ve specified node_bundler as esbuild and stored your function file in the folder you specified, Netlify and Netlify Dev will automatically parse it and bundle your functions. There’s no additional build step that you need. You just need to build your website, functions are automatically handled.

I haven’t tried it myself, but I believe you could add breakpoints in the file generated in the .netlify folder in your local folder structure.

npm run build won’t. But netlify build will include the bundled functions.

That is correct.

1 Like

Ok, so I’m using netlify build. I am now running into an issue with my environment variables. They are undefined. They work fine using netlify dev but not on the deployment preview. They were working fine when I was using netlify-lambda. I have them defined in my netlify.toml

environment = { REACT_APP_PUBLIC_API_KEY="00000", REACT_APP_PRIVATE_API_KEY="00000" }

Are these environment variables being returned undefined in Functions? if yes, that is expected behaviour. Environment variables set in netlify.toml are not accessible during runtime. You need to set them in the UI.

Yes, they are on netlify functions. Are sure about this though? My current live deploy (which, again, uses netlify-lambda) works fine and they are set on netlify.toml. Is there something about netlify-lambda that can work with env vars from netlify.toml?

I personally can’t comment on that as I’ve never used netlify-lambda, maybe it consumes the environment variables and inlines them, something like this plugin: netlify-plugin-inline-functions-env - npm

1 Like

I still can’t get the breakpoints to work. Hopefully someone can help me out with this. Setting breakpoints on the file you mentioned didn’t work, and it’s not ideal either because it’s a transformed file.

I also tried the config here:
https://cli.netlify.com/vscode/

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "netlify dev",
      "type": "node",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
      "program": "${workspaceFolder}/node_modules/.bin/netlify",
      "args": ["dev"],
      "console": "integratedTerminal",
      "env": { "BROWSER": "none" },
      "serverReadyAction": {
        "pattern": "Server now ready on (https?://[\w:.-]+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "netlify functions:serve",
      "type": "node",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
      "program": "${workspaceFolder}/node_modules/.bin/netlify",
      "args": ["functions:serve"],
      "console": "integratedTerminal"
    }
  ]
}

And that didn’t work at all. I’m getting this error:

Debugger attached.
Waiting for the debugger to disconnect...
F:\some\path\node_modules\.bin\netlify:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

I was actually able to get breakpoints working using the file inside .netlify. So that’s some progress. Thanks @hrishikesh. I just had to remove the commented code from the launch.json I was using with netlify-lambda:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Netlify Debugging",
            "type": "pwa-node",
            "request": "launch",
            "program": "${workspaceFolder}\\node_modules\\.bin\\netlify",
            "runtimeArgs": [
                "run-script",
                "debug"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
           // "sourceMapPathOverrides": {
           //    "webpack:///./*": "${workspaceFolder}/src/utilities/lambda/*",
            },
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ]
        }
    ]
}

Still would like to know if I can step through my original file with the original syntax rather than a transformed file. And also would still like to know why the launch.json config I mentioned in the post above isn’t working for me.

The file is going to be transformed in the end, so I personally think it’s better to debug that file. Also, esbuild produces a source map so, I believe that it should be able to show you your original code too - that’s how it works in browsers, I haven’t debugged a lot of code inside VSCode itself.

About the second question of yours, again I’m sorry I have no idea - I’m not a VSCode-based debugger (have literally done it just once or twice on a standalone node program). From reading the JSON file and literally analysing properties for what they might be doing, it looks like it should have worked as the JSON file you’ve posted now doesn’t seem anything like it.

Did you ever learn the answers to these questions? I’m running into the same issues.

Hey @paulrudy , I saw you posted another functions question on a different thread (process.env.URL undefined in netlify functions:serve). Are these two related?

If you are still encountering obstacles with building a Lambda function please share your site, functions file as well as debugging steps you have taken to troubleshoot.

H @SamO, the other post is unrelated.

My question here is not related to any specific site or functions file. It’s about utilizing debugging in VSCode with Netlify functions, which doesn’t seem to work without pointing the debugger to the compiled (/.netlify) js files (as @ShaCP mentioned, not the working files in /netlify/functions.

When running the netlify functions:serve or netlify dev via the VSCode debugger, the debugger complains when I try to set a breakpoint on any function:

Unbound breakpoint

Some of your breakpoints could not be set. If you’re having an issue, you can troubleshoot your launch configuration.

When I click the link for troubleshooting, VSCode responds:

We couldn’t find a corresponding source location, and didn’t find any source with the name <whatever-function-i-try.js>

My launch.json file is as follows:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "netlify dev",
      "type": "node",
      "runtimeExecutable": "pnpm",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
      "program": "/Users/paul/Library/pnpm/netlify",
      "args": ["dev"],
      "console": "integratedTerminal",
      "env": { "BROWSER": "none" },
      "serverReadyAction": {
        "pattern": "Server now ready on (https?://[w:.-]+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "netlify functions:serve",
      "type": "node",
      "runtimeExecutable": "pnpm",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
      "program": "/Users/paul/Library/pnpm/netlify",
      "args": ["functions:serve"],
      "console": "integratedTerminal"
    }
  ]
}

Netlify is successfully compiling .js files from /netlify/functions to ./netlify, and the .js.map files are included.

In VSCode’s article on Debugging Node.js, it offers some tips

One of these tips says:

  • Are the sourceRoot and sources properties in your source map correct? Can they be combined to get the correct path to the .ts file?

When I examine any of the compiled scripts’ maps, I see something like: "sourceRoot": "/var/folders/6g/w2bsbbjx70xfg899ggx8807r0000gn/T/tmp-9299-XxdxGovpqVVm",. This clearly isn’t pointing to /netlify/functions. Could that be the issue?

Any further info on VSCode debugging of Netlify functions?

I just tried debugging and it seems to work fine. As soon as I went to: localhost:8888/.netlify/functions/hello/, VSCode automatically broke the execution here:

here’s the repo I used: https://github.com/Hrishikesh-K/vscode-test and the documentation I followed: Debugging with Visual Studio Code