Problem building lambda function

ShaCP · September 21, 2021, 2:04pm

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",
}

hillary · September 21, 2021, 3:31pm

Hey there, @ShaCP

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

ShaCP · September 21, 2021, 4:00pm

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.

hrishikesh · September 22, 2021, 3:48am

Hi @ShaCP,

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

ShaCP · September 22, 2021, 12:40pm

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

hrishikesh · September 22, 2021, 1:01pm

You can do it using esbuild.

netlify.toml:

[functions]
  node_bundler = "esbuild"

ShaCP · September 30, 2021, 12:40am

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\

hrishikesh · September 30, 2021, 10:43am

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.

ShaCP · September 30, 2021, 3:10pm

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" }

hrishikesh · September 30, 2021, 3:22pm

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.

ShaCP · September 30, 2021, 3:38pm

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?

hrishikesh · September 30, 2021, 4:01pm

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

ShaCP · September 30, 2021, 6:22pm

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

ShaCP · September 30, 2021, 9:01pm

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.

hrishikesh · October 1, 2021, 3:37am

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.

paulrudy · November 2, 2022, 4:32am

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

SamO · November 2, 2022, 3:17pm

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.

paulrudy · November 2, 2022, 5:38pm

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?

paulrudy · November 3, 2022, 7:06pm

Any further info on VSCode debugging of Netlify functions?

hrishikesh · November 6, 2022, 1:33pm

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

Topic		Replies	Views
Netlify function graphql typescript build errors Support building , lambda-functions	3	1476	April 29, 2021
Build with sharp/libvips Support building , lambda-functions	3	2106	January 29, 2021
My lambda function's `package.json` file is causing mystery failures Support building , lambda-functions	4	672	January 4, 2021
Failed to upload file: &{Name:submission-created during build Support deployment	11	428	January 11, 2021
Function compiled with netlify-lambda throwing a dependency error once deployed Support building , deployment , lambda-functions	4	1986	May 10, 2020

Problem building lambda function

Related topics