Using Netlify CLI with functions and ES6

Support
1

Hi. I’m trying out development locally using Netlify CLI but have an issue with functions not running properly. I have tried adding a package.json closer to the function specifying ‘commonjs’ which gets rid of the error. But as soon as I try and import anything using either require or import it breaks. As you can see below, I’m not even importing anything at the moment

My netlify.toml file:

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

[functions]
  directory = "functions"
  node_bundler = "esbuild"

My function api.js:

export async function handler(event, context) {

  return {

    statusCode: 200,

    body: JSON.stringify({ message: "Hello World" })

  }

}

The error:

Error: require() of ES Module C:\dev\repos\sveltekit\project\.netlify\functions-serve\api\api.js from C:\Users\clive\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\lambda-local\build\lambdalocal.js not supported.

api.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.

Instead rename api.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\dev\repos\sveltekit\project\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

  ava.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.

  tead rename api.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\dev\repos\sveltekit\project\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
2

Hi @cliveportman,

Could you share the repo that reproduces this problem?

3

Here you go:

4

I’m unable to get this working at all. I run netlify dev, select npm run dev as the command and the server immediately crashes with the errors:

◈ Loaded function api.
◈ Functions server is listening on 57972
◈ Starting Netlify Dev with SvelteKit
 > error: Cannot read directory "..": operation not permitted


> clive.theportman.co@0.0.1 dev
> svelte-kit dev

Pre-bundling dependencies:
  svelte/store
  svelte
  svelte/animate
  svelte/easing
  svelte/internal
  (...and 2 more)
(this will be run only when your dependencies or config have changed)
 > error: Cannot read directory "..": operation not permitted

> Build failed with 1 error:
error: Cannot read directory "..": operation not permitted
Error: Build failed with 1 error:
error: Cannot read directory "..": operation not permitted
    at failureErrorWithLog (/Users/hrishikesh/Downloads/project-main/node_modules/esbuild/lib/main.js:1475:15)
    at /Users/hrishikesh/Downloads/project-main/node_modules/esbuild/lib/main.js:1133:28
    at runOnEndCallbacks (/Users/hrishikesh/Downloads/project-main/node_modules/esbuild/lib/main.js:923:63)
    at buildResponseToResult (/Users/hrishikesh/Downloads/project-main/node_modules/esbuild/lib/main.js:1131:7)
    at /Users/hrishikesh/Downloads/project-main/node_modules/esbuild/lib/main.js:1240:14
    at /Users/hrishikesh/Downloads/project-main/node_modules/esbuild/lib/main.js:611:9
    at handleIncomingPacket (/Users/hrishikesh/Downloads/project-main/node_modules/esbuild/lib/main.js:708:9)
    at Socket.readFromStdout (/Users/hrishikesh/Downloads/project-main/node_modules/esbuild/lib/main.js:578:7)
    at Socket.emit (node:events:390:28)
    at Socket.emit (node:domain:475:12)
◈ Command failed with exit code 1: npm run dev. Shutting down Netlify Dev server

Is there something I need to do to get this working?

5

Did you npm install? I’m taking the SvelteKit option of npm run dev, if that makes any difference.

6

It was a macOS problem I believe. I tried on Windows and it works.

About the actual problem, it’s because your build pipeline requires you to have "type": "module" in your package.json, based on this:

And esbuild converts your Netlify Functions like this:

image

and if you check this generated api.js, it’s basically this: module.exports = require('./src/functions/api.js') as you can see, it’s trying to use require().

This configuration would not work. I believe you can’t use esbuild in this case.

7

Ok. Thanks. Looks like I can’t use Sveltekit with Netlify functions in that case…

8

Are you having problems without using esbuild as well?

9

I take it you mean including/excluding that line in netlify.toml. I haven’t spotted any difference with that being in there or not. It seems to make no difference.

10

You could get it working (without esbuild) by renaming it to api.cjs and changing the code to:

exports.handler = async () => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello World" })
  }
}
11

Is there a way to tell whether the “esbuild” node bundler is being applied? My reading of the blog post is that I should be able to use imports rather than requires, so I was expecting the bundler to use the same syntax in the functions-serve directory, then there wouldn’t be this issue right?

12

Yes, you can do that when you use esbuild - but what the bundler does with the code is beyond my scope of understanding - in the sense, I’m not sure what configuration Netlify uses to generate the functions zips that can be used by Lambda. I’m sure if imports are converted to require(), there could be some reasoning behind it.

13

Okay. Thanks. We’re sort of solved!