Develop Reference

Why does vercel not import libraries?

I tried to create a site in Vercel for my project (link), but for some reason it returned the following error:
Error: Runtime exited with error: exit status 1 Runtime.ExitError
ERROR Cannot find module 'dotenv' Require stack: -/var/task/index.js
ERROR Did you forget to add it to "dependencies" in package.json?
I tried to delete the first line of code from index.js, which requires the dotenv library, since I don't really need it in vercel, but it gives an error when importing express, so I want to know how to solve this problem.
Below is the code of package.json and vercel.json (for some reason I believe the error is in one of these files)
Package.json:
{
"name": "url_saver",
"version": "1.0.0",
"description": "A FCC project",
"main": "index.js",
"engines": {
"node": "14.x"
},
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "~4.18.1",
"mongoose": "~6.6.2",
"dotenv": "~16.0.3",
"dns": "~0.2.2",
"url": "~0.11.0",
"open": "~8.4.0"
},
"keywords": [
"node",
"express",
"freecodecamp",
"mongoose"
],
"license": "MIT",
"author": "Samuel Schlemper"
}
Vercel.json:
{
"version": 2,
"builds": [
{
"src": "./index.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
Link to full repository on github: https://github.com/Samuel-Schlemper-Schlemuel/Save_URL

Typescript debugging with Visual Studio Code

I'm trying to bind breakpoints in my code, but I'm getting this from the visual code:
"This breakpoint was initially set in:
C:\workspace\N3urons\order-service\src\entities\Order\OrderController.ts line 595 column 1
We couldn't find a corresponding source location, but found some other files with the same name:
file:///C:/workspace/N3urons/order-service/src/entities/Order/OrderController.ts
C:/workspace/N3urons/order-service/src/entities/Order/OrderController.ts
If this is the same file, you may need to adjust your build tool to correct the paths."
I'm coding on Windows and Visual Studio doesn't find the file, but finds matching files with these slashes.
Could someone help me with this?
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
},
{
"name": "Docker: Attach to Node",
"type": "node",
"request": "attach",
"port": 9231,
"address": "localhost",
"localRoot": "${workspaceFolder}",
"remoteRoot": "/usr/src/service",
"sourceMapPathOverrides": {
"/usr/src/service/*": "${workspaceRoot}/*"
},
"protocol": "inspector",
"restart": true
}
]
}

Problem with launch.json file: Visual Studios Code -> Firefox for localhost not working

So I want to launch my JavaScript code from VS-Code to Firefox but cant figure out how to setup the launch.json file.
Terminal:
Terminal view when I run: npm run dev
Debug URL option:
When I hover over "local: http://localhost:3000/"
Error:
Error message that pops up when I try "Debug URL"
launch.json:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "attach",
"name": "Attach"
},
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Launch Firefox against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"program": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe"
},
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"reloadOnAttach": true,
"name": "Launch index.html",
"file": "${workspaceFolder}/index.html"
},
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\Project 3 Three.js\\main.js"
}
]
}

vscode launch config for next.js app

I'm developing a next.js app with Visual Studio Code (vscode) and I like that editor a lot! I've installed Debugger for Chrome from the extension store. The config below starts a new Chrome instance and I can start to debug. It stops on the breakpoint in vscode but here comes the problem. It doesn't show the values of the function and jumps into the node_modules event though I added it to "skipfiles".
Breakpoints also won't stop on the constructor. Is next.js somehow not supported?
I'm using async await syntax a lot. Debugging server side code works perfectly.
{
"name": "My Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/my-client/",
"skipFiles": [
"node_modules/**/*.js",
"<node_internals>/**/*.js",
"node_modules",
".next"
]
}

Following worked for me (extending from Maximiliano Cespedes answer):
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "NPM Launch",
"runtimeExecutable": "npm",
"cwd": "${workspaceFolder}/my-app",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229,
"console": "integratedTerminal"
},
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"stopOnEntry": false,
"restart": true
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
}
],
"compounds": [{
"name": "Debug-Full",
"configurations": ["NPM Launch", "Attach", "Chrome"]
}]
}

I hope is not too late for you ma friend,
Here you have the original documentation from VSCode that solve the issue:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Next: Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "next",
"runtimeArgs": [
"--inspect"
],
"port": 9229,
"console": "integratedTerminal"
}
],
"compounds": [
{
"name": "Next: Full",
"configurations": ["Next: Node", "Next: Chrome"]
}
]
}

visual studio code clean task

I'm working in Visual Studio Code in Ubuntu on my Typescript project. And I'm wondering is there any possibility to execute some kind of 'clean' task.
Here's my tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"tasks": [
{
"taskName": "tsc",
"command": "tsc",
"isShellCommand": true,
"isBackground": true,
"problemMatcher": "$tsc"
},
{
"taskName": "clean",
"linux": {
"command": "rm",
"args": [
"./src/*.js"
],
"isShellCommand": true
},
"isShellCommand": true,
"isBackground": true
}
]
}
And here's my project structure.
Executing task clean says there's no such files or directory, while executing 'pwd' instead of rm says that I'm in the root of my project.
Any suggestions how does this build system work? Maybe there's some special syntax for env variables in VS Code?

After VSCode 1.14, we have a new tasks manager in VSCode. I'm using .NET Core on ubuntu and I have a build and a clean tasks like this:
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "process",
"command": "dotnet",
"args": [
"build",
"MyProj.csproj"
],
"options": {
"cwd": "${workspaceFolder}/src/MyProj/"
},
"problemMatcher": "$msCompile"
},
{
"label": "clean",
"type": "shell",
"linux": {
"command": "rm",
"args": [
"-rfv",
"bin/*",
"obj/*"
]
},
"windows": {
"command": "del",
"args": [
"/S /Q",
"bin/*",
"obj/*"
]
},
"options": {
"cwd": "${workspaceFolder}/src/MyProj/"
},
"problemMatcher": []
}
]
}
Both tasks works as expected.

I have also been looking for this, but as far as I understand, it's not possible to have more than one task in tasks.json. You can have a tasks array, but that only contains different command line parameters for the same task. This example has the 'echo' task, and you can call it with different parameters. If you call the task 'hello' then 'echo Hello World' will be executed:
{
"version": "0.1.0",
"command": "echo",
"isShellCommand": true,
"args": [],
"showOutput": "always",
"echoCommand": true,
"suppressTaskName": true,
"tasks": [
{
"taskName": "hello",
"args": ["Hello World"]
},
{
"taskName": "bye",
"args": ["Good Bye"]
}
]
}

Have you tried using workspace variables? ${workspaceRoot} might be particular useful for you.