I am learning Next.js and and want to debug in visual code and chrome. I have tried different combination for launch.json to debug next.js app in visual code. I grab one of the the code from stack overflow itself. but it turns another failure.
can you please help me how to debug in Next.js app in visual studio code using google chrome.
Below is my launch.json file code :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Example",
"runtimeExecutable": "node",
"runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
"port": 9229,
"cwd": "${workspaceFolder}/frontend",
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/frontend/*"
}
}
]
}
code for my .next.config.js
module.exports = {
webpack(config) {
config.devtool = 'cheap-module-eval-source-map'
return config
},
}
my package.json for frontend
{
"name": "frontend",
"version": "1.0.0",
"description": "Social networking app",
"proxy": "http://127.0.0.1:8080",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"author": "Vivek padelkar",
"license": "ISC",
"dependencies": {
"#ant-design/icons": "^4.7.0",
"antd": "^4.16.13",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"next": "^12.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-toastify": "^8.1.0"
},
"devDependencies": {
"cross-env": "^7.0.3"
}
}
My folder structure is as follows:
outer pacakge.json code (i.e. path : SOCIAL NETWORK/pacakge.json"
{
"name": "socialnetwoek",
"version": "1.0.0",
"description": "social network backend",
"main": "server.js",
"type": "module",
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm run dev --prefix frontend",
"all": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Vivek Padelkar",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"esm": "^3.2.25",
"express": "^4.17.1",
"express-async-handler": "^1.2.0",
"joi": "^17.4.2",
"mongoose": "^6.0.12",
"morgan": "^1.10.0"
},
"devDependencies": {
"concurrently": "^6.4.0",
"nodemon": "^2.0.15"
}
}
Steps that I am following:
while in root folder (i.e.. SOCIAL NETWORK) I am executing command
npm run all.
then I press F5 to run debugger.
Below is my vs screen I am running my Next.js app with chrome and all the debug points are greyed out.(highlighted with red box)
but nothing is working.
Next.js Docs has its dedicated documentation over Debugging.
Your .vscode/launch.json should be:
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
And no changes should be made with next.config.js.
npm run dev can be replaced with yarn dev if you're using Yarn. If you're changing the port number your application starts on, replace the 3000 in http://localhost:3000 with the port you're using instead.
You can select the type of debugging option you need from the dropdown.
Finally found solution , I have edited my launch.json in following way and everything is working as expected , thank you for your valuable time guys.
launch.json
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend"
},
{
"name": "Attach to Edge",
"port": 9222,
"request": "attach",
"type": "pwa-msedge",
"webRoot": "${workspaceFolder}/frontend"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend"
},
{
"name": "Launch Microsoft Edge and open the Edge DevTools",
"request": "launch",
"type": "vscode-edge-devtools.debug",
"url": "http://localhost:3000" // Provide your project's url to finish configuring
}
]
}
Not a proper solution but I've manage without fixing it to run the "fullstack" debugger with this configuration (the one from the documentation).
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
The Next.js documentation over Debugging only works for the frontend or client files, but no to /api/files*, follow theres steps and you can debug your /api/files:
https://blogs.sap.com/2019/07/15/how-to-debug-a-node.js-rest-api-in-visual-studio-code-locally/
Related
Not sure what I am doing wrong. I am trying to setup a monorepo with lerna & nextjs and have been following a tutorial but get stuck at this point.
My file structure looks exactly as specified in the tutorial:
lerna.json
package.json
packages
--- components (React Components)
--- package.json
--- ...
--- frontend (NEXTJS APP)
--- package.json
--- ...
It worked fine so far, but now when I try to import components in my frontend nextjs application, it gives me a Module not found Error:
./pages/index.js:4:0
Module not found: Can't resolve 'components'
My package.json in the / (root) folder:
{
"name": "root",
"private": true,
"devDependencies": {
"lerna": "^4.0.0"
}
}
package.json in packages/frontend (NextJS App) :
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"components": "0.0.0",
"next": "11.1.2",
"next-transpile-modules": "^8.0.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.2"
}
}
package.json in the /packages/components folder:
{
"name": "components",
"version": "0.0.0",
"description": "> TODO: description",
"author": "Anton",
"homepage": "",
"license": "ISC",
"main": "dist/index.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 1",
"dev": "microbundle watch --jsx React.createElement"
},
"source": "lib/index.js",
"devDependencies": {
"microbundle": "^0.13.3"
}
}
I have been following the linked tutorial pretty much to the dot, I'm really not sure what's going on here, but then again, I am a beginner/low intermediate and would appreciate some help!
Had the same issue following the tutorial here.
The gotcha was that you have to run lerna bootstrap again from the root of the monorepo. For me this fixed it.
Facing this error after calling expo build:android.
Can anyone check what's the issue ? I'm using windows 8 OS and yarn.
app.json
"expo": {
"name": "GTechApp",
"slug": "GTechApp",
"version": "1.0.0",
"icon": "./assets/images/icons/logo.png",
"platforms": [
"ios",
"android",
"web"
],
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "com.gtech.gtechapp",
"buildNumber": "1.0.0",
},
"android": {
"package": "com.gtech.gtechapp",
"versionCode": 1,
"icon": "./assets/images/icons/logo.png"
}
}
Thanks for the help.
When I push my Next project to GitHub, I get the following error :
You defined 1 build that did not match any source files (please ensure they are NOT defined in .nowignore)
and this how my now.json looks like:
`
{
"version": 2,
"builds": [
{
"src": "packages/web-app/package.json",
"use": "#now/next"
}
],
"build": {
"env": {
"SECRET": "dev-key",
"ANOTHER_SECRET": "another-dev-key"
}
}
}
`
and Package.json file which located on the root folder contains the following :
`
{
"name": "biletiniz",
"private": true,
"workspaces": [
"packages/*"
],
"scripts": {
"bootstrap": "lerna bootstrap",
"dev": "lerna bootstrap && lerna run dev",
"build": "lerna bootstrap && lerna run build",
"start": "lerna bootstrap && lerna run start"
},
"dependencies": {
"lerna": "^3.16.4"
},
"version": "1.0.0",
"author": "LamaDabbeet",
"license": "MIT"
}
`
And this the project tree:
try this in Now.js V2:
{
"version": 2,
"name": "awesome-app",
"builds": [
{
"src": "packages/next-app/package.json",
"use": "#now/next"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/packages/next-app/$1",
"headers": {
"x-request-path": "$1"
}
}
],
"env": {
"SECRET": "dev-key",
"ANOTHER_SECRET": "another-dev-key"
}
}
Where next-app is your next.js app package
I am trying to debug a React Typescript application in VS Code and I can't figure out how to configure the launch.json to get TSX debugging to work.
I am using webpack to bundle everything into one js file
This is my package.json
{
"name": "reactts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"magic": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"axios": "^0.18.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4"
}
}
and this is my tsconfig.json file
{
"compilerOptions": {
"target": "es6",
"jsx": "react",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
And this is my webpack.config.js file
var path = require("path");
var config = {
entry: ["./src/app.tsx"],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}
]
}
};
module.exports = config;
I use npm run magic to compile the tsx code into the bundled js file
I'm not using webpack but only the script provided by react create-app (npm start = react-scripts start), and then I launch Chrome Debugger using VS Code debug configuration:
Pointing directly to the source /src of the app where app.tsx and index.ts are located.
React -v 16.8.6
Node -v 10.16.0
{
"type": "chrome",
"request": "launch",
"name": "Debug React Run",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
If ill find a solution for webpack I'll update.
in the launch.json file inside the .vscode put the following
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
Run npm start in VSC terminal, the Brower should load, back in VSC just press F5 and you should be attached and able to debug
see Ref!
I hope this helps
While trying to start the angular-phonecat tutorial project from VSCode debug the following error appears
program '/Users/xxxx/src/node/angular-phonecat/8000' does not exist
The project was cloned as follows
git clone --depth=14 https://github.com/angular/angular-phonecat.git
Here is the generated configuration
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch 8000",
// Type of configuration.
"type": "node",
// Workspace relative or absolute path to the program.
"program": "8000",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": ["--nolazy"],
// Environment variables passed to the program.
"env": {
"NODE_ENV": "development"
},
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
]
}
The package.json is as follows
{
"version": "0.0.0",
"private": true,
"name": "angular-phonecat",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"devDependencies": {
"karma": "^0.12.16",
"karma-chrome-launcher": "^0.1.4",
"karma-firefox-launcher": "^0.1.3",
"karma-jasmine": "~0.1.0",
"protractor": "^2.1.0",
"http-server": "^0.6.1",
"tmp": "0.0.23",
"bower": "^1.3.1",
"shelljs": "^0.2.6"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000",
"pretest": "npm install",
"test": "node node_modules/karma/bin/karma start test/karma.conf.js",
"test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor test/protractor-conf.js",
"update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/, '//##NG_LOADER_START##\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//##NG_LOADER_END##', 'app/index-async.html');\""
}
}
you need to run "npm start" from console, before using "Launch Localhost with sourcemaps" Debug options.
configurations will be something like
{
"name": "Launch localhost with sourcemaps",
"types": "chrome",
"request": "launch",
"url": "http://localhost:8000/app",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
BTW, I am using version 0.2.0 launch.json.