Netlify dev failing with "Cannot use import statement outside a module"

I’m new to your platform, but I’ve been using vercel for awhile, and haven’t had any problems deploying on their site. I’m unable to get my functions to work. Here’s the output I’m getting when I run “netlify dev”:

(node:8296) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
wasm streaming compile failed: TypeError: fetch failed
falling back to ArrayBuffer instantiation
◈ Netlify Dev ◈
◈ Injected .env file env var: MONGODB_URI
◈ Loaded function auth http://localhost:8888/.netlify/functions/auth.
◈ Loaded function connect http://localhost:8888/.netlify/functions/connect.
◈ Loaded function store http://localhost:8888/.netlify/functions/store.
◈ Loaded function update http://localhost:8888/.netlify/functions/update.
◈ Functions server is listening on 56922
◈ Starting Netlify Dev with Svelte

> eprodify@1.0.0 dev
> rollup -c -w

rollup v2.77.2
bundles src/app.js → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 5.2s

> eprodify@1.0.0 start
> sirv public --no-clear


  Your application is ready~! 🚀

  - Local:      http://localhost:8080
  - Network:    Add `--host` to expose

 LOGS

  [17:56:17] 200 ─ 3.69ms ─ /
  [17:56:17] 200 ─ 5.38ms ─ /build/bundle.css?livereload=1659574576491
  [17:56:17] 200 ─ 2.19ms ─ /build/bundle.css
  [17:56:17] 200 ─ 10.62ms ─ /build/bundle.js
  [17:56:17] 200 ─ 4.94ms ─ /build/bundle.js.map
  [17:56:17] 200 ─ 0.60ms ─ /favicon.png
bundles src/app.js → public/build/bundle.js...
created public/build/bundle.js in 1.7s
  [17:56:26] 200 ─ 0.78ms ─ /
  [17:56:26] 200 ─ 1.71ms ─ /build/bundle.css
  [17:56:26] 200 ─ 8.63ms ─ /build/bundle.js
- Waiting for framework port 5000. This can be configured using the 'targetPort' property in the netlify.tomlRequest from ::1: OPTIONS /.netlify/functions/auth
{"level":"error","message":"End - Error:"}
{"errorMessage":"Cannot use import statement outside a module","errorType":"SyntaxError","level":"error","stackTrace":["ort crypto from 'crypto';","^^^","","taxError: Cannot use import statement outside a module","Object.compileFunction (node:vm:360:18)","wrapSafe (node:internal/modules/cjs/loader:1049:15)","Module._compile (node:internal/modules/cjs/loader:1084:27)","Module._extensions..js (node:internal/modules/cjs/loader:1174:10)","Module.load (node:internal/modules/cjs/loader:998:32)","Module._load (node:internal/modules/cjs/loader:839:12)","Module.require (node:internal/modules/cjs/loader:1022:19)","require (node:internal/modules/cjs/helpers:102:18)","Object._executeSync (C:\\Users\\gregd\\AppData\\Roaming\\npm\\node_modules\\netlify-cli\\node_modules\\lambda-local\\build\\lambdalocal.js:277:26)","C:\\Users\\gregd\\AppData\\Roaming\\npm\\node_modules\\netlify-cli\\node_modules\\lambda-local\\build\\lambdalocal.js:95:26"]}
Response with status 500 in 21 ms.
  [17:56:26] 200 ─ 4.90ms ─ /build/bundle.js.map
  [17:56:26] 200 ─ 0.56ms ─ /favicon.png
| Waiting for framework port 5000. This can be configured using the 'targetPort' property in the netlify.toml

So there are several issues here:

  1. What is the noise about “fetch”?
  2. When I run my site on :8080 and call my functions at :3000 I get the server 500 error, as indicated with the error messages. I don’t understand why it’s failing. (Note: these same functions work fine on vercel.)
  3. What is it waiting for on port 5000? Which eventually times out and fails/exits. This is a Svelte site, and it does successfully build it and serves from 8080. So what is supposed to be on 5000?

Thanks for any help here.

Also, here’s my config file:

[build]
  command = "npm run build"
  functions = "/api"
  publish = "public"

  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
  ## Not needed for static site generators.
  #[[redirects]]
  #  from = "/*"
  #  to = "/index.html"
  #  status = 200

  ## (optional) Settings for Netlify Dev
  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
  #[dev]
  #  command = "yarn start" # Command to start your dev server
  #  port = 3000 # Port that the dev server will be listening on
  #  publish = "dist" # Folder with the static content for _redirect file

  ## more info on configuring this file: https://docs.netlify.com/configure-builds/file-based-configuration/

[dev]
#port = 8888
#targetPort=
functionsPort=3000
command = "npm run dev"

Node Fetch switched to ESM-only since their version 3 release. ESM in Netlify Functions can be used with:

Why would you do that? Functions and Site should run on the same port so you can directly call them like /.netlify/functions/something instead of having to specify a port, which would most likely cause issues in production.

It mentions that here:

It’s waiting for your framework. If your framework is using a different port, feel free to change add the following to your netlify.toml:

[dev]
  targetPort = ####

You should not need this. Let the CLI run Functions on any port, they should be usable on :8888 (along with your site).

So it’s still not clear:

  1. Is node fetch failing here, or is this just a warning?

  2. “Why would I do that”? I’m talking about running in development mode on localhost, so I need to use ports. My site is at :8080, because that’s how it’s configured in the svelte project. I’m specifically specifying “functionsPort=3000” in the config file.

  3. I don’t understand “waiting for your framework”. This is a Svelte project. What framework are you talking about? Furthermore, after awhile “netlify dev” fails this wait and quits. How do you tell it to not do that?

Now I’m seemingly getting to my functions?, but I get this error:

{“level”:“error”,“message”:“End - Error:”}
{“errorMessage”:“Cannot use import statement outside a module”,“errorType”:“SyntaxError”,“level”:“error”,“stackTrace”:[“ort crypto from ‘crypto’;”,“^^^”,“”,“taxError: Cannot use import statement outside a module”,“Object.compileFunction (node:vm:360:18)”,“wrapSafe (node:internal/modules/cjs/loader:1049:15)”,“Module._compile (node:internal/modules/cjs/loader:1084:27)”,“Module._extensions…js (node:internal/modules/cjs/loader:1174:10)”,“Module.load (node:internal/modules/cjs/loader:998:32)”,“Module._load (node:internal/modules/cjs/loader:839:12)”,“Module.require (node:internal/modules/cjs/loader:1022:19)”,“require (node:internal/modules/cjs/helpers:102:18)”,“Object._executeSync (C:\Users\gregd\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\lambda-local\build\lambdalocal.js:277:26)”,“C:\Users\gregd\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\lambda-local\build\lambdalocal.js:95:26”]}

What does this mean?

Thanks for any help here.

I’ve explained that before, but here you go again:

TL;DR, you need to add:

[functions]
  node_bundler = "esbuild"

to your netlify.toml OR use Node Fetch version less than 3. Or even better, use Axios.

Exactly my point, you don’t have to do that. the CLI will bridge your framework and functions on the same port (8888 by default in most cases). Here’s a better explanation:

In a Svelte project, it would wait for your framework, which is… Svelte. This might be relevant too:

Answered that above too:

1 Like