events.action: opened
events.author: gkatsanos
events.masked_author: username_0
events.text: Hey guys, 
  
  I'd like to contribute to the docs on the topic.  If someone throws some quick info in this thread as I've spent hours and hours trying to get SSR VSCode debugging to work. Specifically there's nothing with regards to sourcemaps. 
  As it stands, standard starter template is unable to bind to any breakpoints on VSCode for SSR code (`asyncData()` for example)
events.title: One more issue for SSR debugging not working
events.type: issue
events.action: created
events.author: gkatsanos
events.masked_author: username_0
events.text: @danielpost if anyone from the team has experience on debugging and can give a tip or two, I'd gladly redact the doc for this and make a MR. It's possible though that some changes in the base webpack configuration are needed?
events.type: comment
events.action: created
events.author: fabis94
events.masked_author: username_1
events.text: Some sort of docs for debugging SSR are definitely necessary, I've also been unable to find any useful documentation for setting it up. I was able to start the nuxt process with the `--inspect` flag, but no breakpoints work.
events.type: comment
events.action: created
events.author: ed3899
events.masked_author: username_2
events.text: Same issues here. I'm developing a static website with Nuxt and Typescript (No custom server) with these launch.json specs
  
  
  ```
  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "runtimeExecutable": "C:\\Program Files (x86)\\BraveSoftware\\Brave-Browser\\Application\\brave.exe",
        "request": "launch",
        "name": "client: chrome",
        "url": "http://localhost:4000",
        "webRoot": "${workspaceFolder}"
      },
      {
        "type": "node",
        "request": "launch",
        "name": "server: nuxt",
        "args": ["dev"],
        "osx": {
          "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
        },
        "linux": {
          "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
        },
        "windows": {
          "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
        }
      }
    ],
    "compounds": [
      {
        "name": "fullstack: nuxt",
        "configurations": ["server: nuxt", "client: chrome"]
      }
    ]
  }
  ```
  
  
  And this is my debugging console on the server side:
  ```
  C:\Program Files\nodejs\node.exe .\node_modules\nuxt\bin\nuxt.js dev
  Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/vue-template-es2015-compiler/buble.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\vue-template-es2015-compiler\buble-browser-deps.umd.js.map'
  Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/postcss-nesting/index.cjs.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\postcss-nesting\index.cjs.js.map'
  2
  Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/typescript/lib/typescript.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\typescript\lib\typescript.js.map'
  Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/index.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\index.js.map'
  Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/constants.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\constants.js.map'
  Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/instances.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\instances.js.map'
  Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/after-compile.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\after-compile.js.map'
  Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/utils.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\utils.js.map'
  ```
  
  My tsconfig.json
  ```
  {
    "compilerOptions": {
      "target": "ES2018",
      "module": "ESNext",
      "moduleResolution": "Node",
      "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
      "esModuleInterop": true,
      "jsx": "preserve",
      "noEmitOnError": true,
      "allowJs": true,
      "sourceMap": true,
      "strict": true,
      "noEmit": true,
      "experimentalDecorators": true,
      "baseUrl": ".",
      "paths": {
        "~/*": ["./*"],
        "@/*": ["./*"]
      },
      "types": [
        "@nuxt/types",
        "@nuxtjs/axios",
        "@types/node",
        "@nuxt/content",
        "@nuxt/vue-app",
        "@nuxtjs/vuetify"
      ]
    },
    "exclude": ["node_modules", ".nuxt", "dist"]
  }
  ```
  
  And my nuxt.config.js:
  ```
  export const config = {
    // Target: https://go.nuxtjs.dev/config-target
    target: "static",
  
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
      titleTemplate: "%s - cms-blog",
      title: "cms-blog",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "description", name: "description", content: "" }
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
    },
  
    // Global CSS: https://go.nuxtjs.dev/config-css
    css: [],
  
    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [],
  
    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,
  
    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
      // https://go.nuxtjs.dev/typescript
      "@nuxt/typescript-build",
      // https://go.nuxtjs.dev/vuetify
      "@nuxtjs/vuetify",
      "@nuxtjs/fontawesome",
      "nuxt-typed-vuex"
    ],
  
    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
      // https://go.nuxtjs.dev/axios
      "@nuxtjs/axios",
      // https://go.nuxtjs.dev/pwa
      "@nuxtjs/pwa",
      "@nuxt/content",
      "@nuxtjs/google-fonts"
    ],
  
    // Axios module configuration: https://go.nuxtjs.dev/config-axios
    axios: {},
  
    // PWA module configuration: https://go.nuxtjs.dev/pwa
    pwa: {
      manifest: {
        lang: "en"
      }
    },
  
    //Font awesome config
    fontawesome: {
      component: "Fa",
      suffix: true,
      icons: {
        solid: ["faSearch"]
      }
    },
  
    // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
    vuetify: {
      customVariables: ["~/assets/variables.scss"],
      theme: {
        dark: true,
        default: false,
        disable: false,
        options: {},
        themes: {
          dark: {
            primary: colors.blue.darken2,
            accent: colors.grey.darken3,
            secondary: colors.amber.darken3,
            info: colors.teal.lighten1,
            warning: colors.amber.base,
            error: colors.deepOrange.accent4,
            success: colors.green.accent3
          },
          light: {
            primary: colors.blue.lighten2,
            accent: colors.grey.lighten3,
            secondary: colors.amber.lighten3,
            info: colors.teal.darken1,
            warning: colors.amber.base,
            error: colors.deepOrange.accent4,
            success: colors.green.accent3
          }
        }
      }
    },
  
    //Dev configuration
    server: {
      port: 4000
    },
  
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
      cssSourceMap: true,
  
      extend(config, { isDev, isClient }) {
        if (isDev) {
          config.devtool = "source-map";
        }
      }
    },
  
    //env
    publicRuntimeConfig: {
      mode: process.env.NODE_ENV
    }
  }
  ```
events.type: comment
events.action: created
events.author: fabis94
events.masked_author: username_1
events.text: I don't see why you wouldn't be able to reproduce this with the latest version, the issue would only disappear with some serious architectural changes. The resolution here, in my opinion, is to just write some useful guidelines/docs on how to debug server-side code.
events.type: comment
events.action: created
events.author: imuradevelopment
events.masked_author: username_3
events.text: After all, what do I need to do to set a "breakpoint" for the SSR code in "VScode" and debug the NuxtApp rendered in "chrome"?
  Nuxt is great, but if debugging is unstable...
events.type: comment