Nest-cli: Adding sourcemap support for webpack builds.

Created on 1 May 2020  路  8Comments  路  Source: nestjs/nest-cli

I'm submitting a...


[ ] Regression 
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

In webpack mode, there is no way to ask for nestjs to pass sourcemaps to be compiled at build time.

Expected behavior

Have the ability to have source map support using https://github.com/evanw/node-source-map-support

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Most helpful comment

@kamilmysliwiec Perhaps this feature request was phrased poorly, but my expectation from a feature-rich framework like NestJS is that debugging should be useful 'out of the box'. That one shouldn't be left to parse a single compiled JS file and trace back where it came from every time a stack trace occurs. I was tempted to open a feature request of this nature and saw this one.

Is there any reason that debugging with accurate file/line-numbers is not a core feature? The issue you reference here points to two other sources that are in no way useful to figure out what options are needed in what places to actually get a source map (if they are, I'm prolly missing deep knowledge to make sense of it). I understand perhaps this is very obvious to an expert in all these tools (ts-loader, webpack), but when trying to get a new monorepo app running, it's incredibly frustrating that the default experience is lacking.

I asked per your response here and other places (that questions should be posted to support on Discord), "does anyone knows how to get sourcemaps working in the default monorepo project?" and @jmcdo29 looked into it and was unable to get it working in a reasonable amount of time as well so I still haven't heard or seen a working configuration.

All 8 comments

@kamilmysliwiec Perhaps this feature request was phrased poorly, but my expectation from a feature-rich framework like NestJS is that debugging should be useful 'out of the box'. That one shouldn't be left to parse a single compiled JS file and trace back where it came from every time a stack trace occurs. I was tempted to open a feature request of this nature and saw this one.

Is there any reason that debugging with accurate file/line-numbers is not a core feature? The issue you reference here points to two other sources that are in no way useful to figure out what options are needed in what places to actually get a source map (if they are, I'm prolly missing deep knowledge to make sense of it). I understand perhaps this is very obvious to an expert in all these tools (ts-loader, webpack), but when trying to get a new monorepo app running, it's incredibly frustrating that the default experience is lacking.

I asked per your response here and other places (that questions should be posted to support on Discord), "does anyone knows how to get sourcemaps working in the default monorepo project?" and @jmcdo29 looked into it and was unable to get it working in a reasonable amount of time as well so I still haven't heard or seen a working configuration.

@bbangert following the issue that he posted above worked. I totally agree that it should be a default though.

@kylecannon really? what did you need to put in the webpack.config.js file? I've only been doing JS/TS dev for around 18 months now and the docs pointed out didn't help me.

@bbangert

module.exports = function(options) {
  return {
    ...options,
    devtool: 'inline-source-map',
  };
};

@kylecannon Hmm, I've had several that setup as well as several variations, and wasn't able to get useful source-maps that could be interpreted by the souce-map-support npm package. Are there additional changes needed to make it all work together?

Edit: ok, weird, perhaps I changed the options to many times. This time when I started it, I did get correct inline source-maps out that were accounted for. Thanks @kylecannon, it definitely feels like this should be in the schematic for monorepo conversion.

Sorry for taking time to respond on Discord @bbangert. This is something I needed my laptop to take a look at and I just haven't had the time to pull it out. @kylecannon's solution works for inline maps. Otherwise you can use this
`js // webpack.config.js module.exports = function(options) { return { ...options, devtool: 'source-map', } }

The webpack.config.js works for creating the sourcemaps, however, to get the stacktrace to your .ts source files in your terminal, you need to

  1. add require('source-map-support').install(); to the main.ts file of your monorepo's apps. Not sure why nobody mentioned this step (?). The above referenced comment to https://github.com/nestjs/nest/issues/4644#issuecomment-616992927 is not helping without this information. What do you want with a source map when doing backend dev when you can not use it in your terminal stacktraces??? Anyway...
  1. npm install --save-dev source-map-support
    And it should work (your root tsconfig.json should include "sourceMap": true, by default).

Also See https://stackoverflow.com/questions/42088007/is-there-source-map-support-for-typescript-in-node-nodemon.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bovandersteene picture bovandersteene  路  5Comments

John0x picture John0x  路  6Comments

Juancoll picture Juancoll  路  5Comments

iangregsondev picture iangregsondev  路  6Comments

IonelLupu picture IonelLupu  路  5Comments