It's not possible to debug the application

[esteban-filardi]

Issue summary

It's not possible to correctly debug the application. The debbuger functions (e.g. next line, settings break points etc.) don't work correctly. I tested both with JetBrains products and with VSCode. This is not a very good development experience.

Expected behavior

The application template provided by Shopify allows to be debugged correctly , providing a good development experience.

Actual behavior

The application template provided by Shopify cannot be easily debugged.

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

Initialize the application under a debug and try to set endpoints and navigate the code using debugger functions for instance in.

Reduced test case

Debug the "afterAuth" method, when going trough to the shop = ctx.query.shop line, the debugger breaks.

Specifications

Tested in WebStorm and VSCode.

[esteban-filardi]

What happened was that the "debugger" started, but clearly it wasn't matching correctly the source code to the executed code.

I was able to make this work by making some modifications to the app template

server/index.js

require("@babel/register")({
  // needs to specify a custom babel config file because if you use the "default" name NextJS detects it and tries to use it too
  configFile: './babel.server.config.json',
  ignore: ["node_modules"],
});

// Import the rest of our application.
module.exports = require("./server.js");

babel.server.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

And then finally modify the package.json to include the "--inspect" flag

package.json

...
  "scripts": {
     ...
    "dev": "cross-env NODE_ENV=development nodemon --inspect ./server/index.js --watch ./server/index.js",
    ...
  },
...