Netlify dev: function returns 404 when using functions/functionname/index.js syntax instead of functions/functionname.js

ardiewen · October 9, 2020, 3:01pm

Hi there, I’m experiencing the following issue:

According to this documentation, we should be able to use an index.js file inside of a folder name to reach the endpoint.

E.g. /functions/hello-world.js should be equivalent to /functions/hello-world/index.js

This works fine in production (I’m using a custom build process via Gatsby Cloud, the onPostBuild hook and @netlify/zip-it-and-ship-it).

Examples:
https://gatsby-cloud-netlify-functions.netlify.app/.netlify/functions/test
https://gatsby-cloud-netlify-functions.netlify.app/.netlify/functions/hello-world

However, this does not work when utilizing netlify dev during local development with a corresponding netlify.toml file. When I attempt to hit the functions on localhost, I receive the following console errors:

GET http://localhost:8888/.netlify/functions/hello-world

Request from ::ffff:127.0.0.1: GET /.netlify/functions/hello-world
Response with status 200 in 9 ms.

GET http://localhost:8888/.netlify/functions/test

Request from ::ffff:127.0.0.1: GET /.netlify/functions/test
Response with status 404 in 0 ms.
Request from ::ffff:127.0.0.1: GET /.netlify/functions/test.html
Response with status 404 in 0 ms.
Request from ::ffff:127.0.0.1: GET /.netlify/functions/test.htm
Response with status 404 in 0 ms.
Request from ::ffff:127.0.0.1: GET /.netlify/functions/test/index.html
Response with status 404 in 0 ms.
Request from ::ffff:127.0.0.1: GET /.netlify/functions/test/index.htm
Response with status 404 in 0 ms.

Here’s my minimal repo configuration:

Base Repo: gatsby-starter-default

Folder Hierarchy:

.
|-- src
|   |-- functions
|   |   |-- hello-world.js
|   |   |-- test
|   |   |   |-- index.js

netlify.toml:

[build]
  functions="public/functions" #this is for gatsby cloud config

[dev]
  functions="src/functions"

Running gatsby with netlify dev and what should be all the appropriate ports.

Any advice would be appreciated.

jen · October 16, 2020, 5:59pm

Hey @ardiewen,
I responded and tagged you but realized I misspoke! I can confirm that this is the CLI behavior. When you use the functionName/index.js format, the CLI doesn’t find index.js given the functions directory that you set in the [dev] block.

Would you be willing to open a feature request on the CLI repo for parity with the Netlify platform on this? I know the CLI team would also love a PR if you were interested. I think you’d be working in here: cli/get-functions.js at 294818b430cd0e2a93e648b533cd83d0352853cf · netlify/cli · GitHub

You can see the whole flow by checking out cli/src/commands/functions/invoke.js. If you try netlify functions invoke:test in your example above, you’ll get this error:

github.com

netlify/cli/blob/294818b430cd0e2a93e648b533cd83d0352853cf/src/commands/functions/invoke.js#L191-L193


      
          `Function name ${chalk.yellow(
            functionToTrigger
          )} supplied but no matching function found in your functions folder, forcing you to pick a valid one...`

because the isValidFn check fails. That fails because getFunctions fails:

github.com

netlify/cli/blob/294818b430cd0e2a93e648b533cd83d0352853cf/src/commands/functions/invoke.js#L45


      
            this.error('functions directory is undefined, did you forget to set it in netlify.toml?')
            process.exit(1)
          }
          
          
if (!flags.port)
            console.warn(
              `${NETLIFYDEVWARN} "port" flag was not specified. Attempting to connect to localhost:8888 by default`
            )
          const port = flags.port || 8888
          
          
const functions = getFunctions(functionsDir)
          const functionToTrigger = await getNameFromArgs(functions, args, flags)
          
          
let headers = {}
          let body = {}
          
          
await this.config.runHook('analytics', {
            eventName: 'command',
            payload: {
              command: 'functions:invoke',
            },

It sounds like you have a workaround, but please let us know if there’s anything else we can help with.

ardiewen · October 27, 2020, 2:15pm

Thanks @jen for looking into this.

I submitted a PR per your suggestion:

github.com/netlify/cli

fix: support index.js function name

netlify:master ← ardiewen:fix/support-index-js-as-function-name

opened 01:21PM - 27 Oct 20 UTC

ardiewen

+8 -4

**- Summary** Per the [Build with Javascript documentation](https://docs.netl…ify.com/functions/build-with-javascript/), functions ought to support the following naming formats: - my_functions/functionname.js - my_functions/functionname/functionname.js - my_functions/functionname/index.js Currently, this works perfectly fine on Netlify hosted production environments, but fails when running `netlify dev` via the CLI. For more details on how to replicate this problem, including a minimal reproduction, please see this [support thread](https://community.netlify.com/t/netlify-dev-function-returns-404-when-using-functions-functionname-index-js-syntax-instead-of-functions-functionname-js/24124/2) I created on the Community Forums. **- Test plan** 1. I first tested some basic scenarios in a production environment hosted on Netlify to understand the expected behaviour when different naming conventions (and different combinations) are used, for example: ``` . |-- my_functions | | |-- bob | | | |-- bob.js | | | |-- index.js | | |-- test | | | |-- test.js | | |-- test2 | | | |-- index.js | | |-- test3 | | | |-- index.js | | | |-- test3.js | | |-- hello-world.js ``` This can be verified here: https://gatsby-cloud-netlify-functions.netlify.app/ e.g. https://gatsby-cloud-netlify-functions.netlify.app/.netlify/functions/hello-world.js etc... 2. In the above scenarios, everything works as expected with the ambiguous cases being `bob` and `test3` where both `functionname/index.js` and `functionname/functionname.js` files exist. In these cases, the production environment takes the the named function file, if it exists, then the index file, if it exists AND the named function file doesn't exist. This behaviour can be confirmed here: Uses bob.js: https://gatsby-cloud-netlify-functions.netlify.app/.netlify/functions/bob Uses test3.js: https://gatsby-cloud-netlify-functions.netlify.app/.netlify/functions/test3 3. This PR reflects this behaviour in the local `netlify dev` environment. 4. Per [this conversation](https://github.com/netlify/cli/issues/694#issuecomment-716717020), there is a failing test for `should deploy edge handlers when directory exists` but all other tests appear to be passing fine (as far as I can see). **- Description for the changelog** Adds missing support for naming functions using the `my_functions/functionname/index.js` convention per official documentation. **- A picture of a cute animal (not mandatory but encouraged)** dog tax: ![IMG_0786](https://user-images.githubusercontent.com/39966887/97306832-5d257000-1835-11eb-9246-13dea136c0bb.JPG)

jen · October 27, 2020, 5:07pm

Amazing!!! Thanks so much for your contribution here