Cli: Netlify Dev doesnt load site and freezes computer

[daihovey]

Bug

Running yarn netlify dev opens localhost:8888 it never loads and the fans spin up to max and eventually the computer freezes up and I have to restart.

Running yarn start
which runs:
```"scripts": {
"start": "run-p start:",
"start:app": "react-scripts start",
"start:lambda": "netlify-lambda serve src/lambda",
"build": "run-p build:",
"build:app": "react-scripts build",
"build:lambda": "netlify-lambda build src/lambda",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

**- What is the expected behavior?**
Load site properly
**- Local Environment Information**

netlify-cli/2.35.0 darwin-x64 node-v12.14.0

────────────────────┐
Environment Info │
────────────────────┘

System:
OS: macOS Mojave 10.14.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 12.14.0 - /var/folders/6p/m28bmn210hn1qx444s_vf1dh0000gn/T/yarn--1582348945685-0.10804907235822703/node
Yarn: 1.21.1 - /var/folders/6p/m28bmn210hn1qx444s_vf1dh0000gn/T/yarn--1582348945685-0.10804907235822703/yarn
npm: 6.13.4 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.130
Safari: 12.1.1
```

[maxcell]

Howdy @daihovey! I don't actually think you want the start:lambda to point to src/lambda. I believe I had a similar issue because netlify dev is going to be rebuilding as it sees changes and so you kinda have a circular dependency going on. Your functions are being built, the changes get noticed by netlify dev, and so they are being ran and then built again.

I believe you want your build step to output into a separate folder that will get picked up by your npm start command. To do this you might need to add a netlify.toml that has something to the effect of:

[build]
  functions = "functions-build" # where this string represents where your built functions will live.

Because you're using netlfiy-lambda you will want a separate folder for the source of your functions versus where they will be built/served. Hope that helps!

I think I gave bad advice here, and I'm sorry! I should inquiry one more thing, do you have a netlify.toml and what does it do?

[maxcell]

Also is netlify-cli installed locally or globally for you? You mention you're trying to run yarn netlify dev?

[heymartinadams]

I’m experiencing the same when running netlify dev in the console — a super high CPU load, freezes up the computer, and a crash of localhost:8888 when running netlify dev. Using [email protected] globally.

Error message: error while proxying request: socket hang up

Folder structure:

functions/
functions/package.json
src/
package.json
netlify.toml

Here’s my netlify.toml file:

[build]
command = "yarn build"
# { "build": "cd functions && yarn && cd .. && npx prisma2 generate && netlify-lambda build functions && netlify-lambda install functions && react-scripts build" }
# (using [Prisma Client](https://github.com/prisma/prisma-client-js) inside functions, but not relevant to this issue)
functions = "build-functions/"
publish = "build/"

[build.environment]
# Fix to ensure the Prisma binary is packaged with the lambda function
ZISI_VERSION = "0.4.0-9"

[heymartinadams]

Solved it. @maxcell I think your intuition was spot on:

The issue is that netlify dev parses through the package.json file and looks for where there is a script that contains a netlify-lambda command, and then executes that script (even when I tried not to tell it to execute it by changing the command in netlify.toml — that’s a significant issue imo, since I had a script reserved for deployment, not local development).

Once I removed all mentions of netlify-lambda from my package.json file, the issue was gone and netlify dev compiles well.

[heymartinadams]

Okay, so I’m officially confirming that netlify dev parsing through the package.json file is a really bad idea. Check this out:

netlify.toml

[build]
command = "yarn deploy"
functions = "build-functions/"
publish = "build/"

[build.environment]
# Fix to ensure the Prisma binary is packaged with the lambda function
ZISI_VERSION = "0.4.0-9"

Local development

This package.json file works with local development, yarn dev:

package.json

"scripts": {
    "dev": "netlify dev",
}

Deploy to Netlify (via git)

But when I attempt to add custom logic for production deployment (see command = "yarn deploy" in netlify.toml) via git, local development fails, because it will attempt to execute "deploy" since it contains at least one netlify-lambda command, even if I remove the command = "yarn deploy" from netlify.toml.

package.json

"scripts": {
    "deploy": "cd functions && yarn && cd .. && npx prisma2 generate && netlify-lambda build functions && netlify-lambda install functions && react-scripts build",
    "dev": "netlify dev",
}

[heymartinadams]

Solution

What I discovered works is to take the netlify-lambda commands out of the package.json file and place them directly into the netlify.toml file:

netlify.toml

[build]
publish = "build/"
command = "cd functions && yarn && cd .. && npx prisma2 generate && netlify-lambda build functions && netlify-lambda install functions && react-scripts build"
# During production, `functions` folder cannot be the same as destination, so you need to create another destination:
functions = "build-functions/"

[build.environment]
# Fix to ensure the Prisma binary is packaged with the lambda function
ZISI_VERSION = "0.4.0-9"

[context.develop]
# `netlify dev` in local development won’t work unless destination is the same as actual `functions` folder.
functions = "functions/"

package.json

"scripts": {
    "dev": "netlify dev",
}

This way you can use netlify dev for local development and deploy without a hitch as well.

[RaeesBhatti]

Thank you for reporting this @daihovey. Is is possible for you to share a reproducible instance of this problem in a minimal repo?

[RaeesBhatti]

@heymartinadams You can specify different commands for the production and dev in your netlify.toml. Like so:

[dev]
  command = "yarn start"

Please try it out and let us know if that doesn't fix your problem.

[skyfly200]

@heymartinadams You can specify different commands for the production and dev in your netlify.toml. Like so:

[dev]
  command = "yarn start"

Please try it out and let us know if that doesn't fix your problem.

This fixed my issues! thanks!

my npm scripts are like so

"scripts": {
    "production": "npm run build && npm run lambda",
    "dev": "npm run lambda && npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lambda": "netlify-lambda build ./src/lambda -c ./webpack.functions.js",
    "postinstall": "netlify-lambda install ./src/lambda",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "make": "vue invoke generator"
  },

and my netlify.toml file is

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

[dev]
  command = "npm run dev"

[RaeesBhatti]

This should've been fixed by https://github.com/netlify/cli/pull/974

Please reopen if that is not the case

[skyfly200]

Yeah, this still happens when I tried today. I am just giving up on using it as its so annoying of a bug

[erezrokah]

@skyfly200, can you please make sure you're using the latest version of the CLI v2.58.0 and if that doesn't work do you mind opening a new issue for it?
The fix was specifically related to projects using netlify-lambda, so we want to make sure we're not missing anything else.