Serverless-webpack: source-map support in production and locally

Created on 18 Sep 2017 · 15Comments · Source: serverless-heaven/serverless-webpack

Version: "serverless-webpack": "3.0.0"

I am wondering if anyone has gotten source-map support working on production system. Because debugging based on AWS CloudWatch input has always been a good way to find problems in the production system. Identifying the problem with output like at products (C:/Users/piust/Documents/colugo/.webpack/service/handler.js:4173:61) is really hard.

Has anyone gotten a solution for this? I'm running basic configuration from what I understand from webpack:

const path = require('path')
const Dotenv = require('dotenv-webpack')
const slsw = require('serverless-webpack')

module.exports = {
  devtool: 'source-map',
  entry: slsw.lib.entries,
  target: 'node',
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      include: __dirname,
      exclude: /node_modules/,
      options: {
        presets: ['es2015', 'stage-2'],
        plugins: ['transform-runtime'],
      },
    }],
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, '.webpack'),
    filename: 'handler.js', // this should match the first part of function handler in `serverless.yml`
  },
}

help wanted question

Source

nenti

👍2

Most helpful comment

Make sure to add require('source-map-support').install(); or import "source-map-support/register"; to the top of your Lambda handlers to load the source map. Otherwise it will not be used. See here: https://github.com/evanw/node-source-map-support

arabold on 18 Sep 2017

👍14 🚀1 ❤1

All 15 comments

arabold on 18 Sep 2017

👍14 🚀1 ❤1

Additionally you should set filename: '[name].js' to allow for multiple handler filenames in case you'll use package individually and have more than one handler in your project.

HyperBrain on 18 Sep 2017

npm install source-map-support
equire('source-map-support').install()

Helped for AWS logs. Thx! When I run locally with serverless offline start I still don't get sourcemaps. Any ideas?

nenti on 18 Sep 2017

👍1

That sounds strange. Normally serverless-offline requires the sources/handlers exactly as it is done within the AWS Lambda runtime.
For us this works locally. I compared the config with yours and the only differences I found are:

// webpack config
bail: true, // exit on any error    <---- THIS ONE
...
devtool: 'nosources-source-map',  <---- THIS ONE
...
output: {
  ...
  filename: '[name].js',
  sourceMapFilename: '[file].map'    <---- THIS ONE
}

But I'm not really sure if any of these settings has anything to do with the offline mode.

HyperBrain on 19 Sep 2017

The simple babel-plugin-source-map-support plugin will automatically insert import 'source-map-support/register' in every file, so you don't need to remember.

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  devtool: 'source-map',
  externals: [
    /aws-sdk/
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      include: projectPath,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          babelrc: false,
          presets: [
            [ 'env', {
              targets: { node: '6.10' },
              useBuiltIns: true,
              modules: false,
              loose: true
            }]
          ],
          plugins: [
            'source-map-support', // <-- INCLUDE THIS
            'transform-object-rest-spread'
          ]
        }
      }
    }]
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(projectPath, '.webpack'),
    filename: '[name].js'
  }

jmalins on 19 Sep 2017

👍4

@nenti Did you manage to succeed?

HyperBrain on 25 Sep 2017

Sorry for late reply. I tried both solution proposals for local execution but either didn't work.

On AWS I get a perfect Stacktrace though!

Following package version are used:

    "babel-cli": "^6.24.1",
    "babel-core": "6.25.0",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.0",
    "babel-plugin-source-map-support": "^1.0.0",
    "source-map-support": "^0.4.18",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "dotenv-webpack": "^1.5.4",
    "eslint": "^4.6.1",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "7.0.1",
    "jest": "20.0.4",
    "jest-cli": "20.0.4",
    "regenerator-runtime": "^0.10.5",
    "serverless": "^1.23.0",
    "serverless-dynamodb-local": "0.2.25",
    "serverless-jest-plugin": "^0.1.5",
    "serverless-offline": "^3.16.0",
    "serverless-step-functions": "^1.1.0",
    "serverless-webpack": "3.0.0",
    "webpack": "3.0.0",
    "webpack-node-externals": "^1.6.0",

With the following webpack.config

  devtool: 'source-map',
  entry: slsw.lib.entries,
  target: 'node',
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      include: __dirname,
      exclude: /node_modules/,
      options: {
        presets: ['es2015', 'stage-2'],
        plugins: [
          'transform-runtime',
          'source-map-support',
        ],
      },
    }],
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, '.webpack'),
    filename: '[name].js', // this should match the first part of function handler in `serverless.yml`
  },

nenti on 30 Sep 2017

Maybe the dynamic require feature #266 will solve the issue. As soon as it is there you can add modules that will be required automatically by webpack for all or selected functions to your configuration.

HyperBrain on 2 Nov 2017

Hi Guys,

I can't figure out how to make my serverless.com project generate source-maps.
I've installed both source-map-support and babel-plugin-source-map-support. My babelrc looks like that

{
  "presets": [
    [ "env", {
      "targets": {
        "node": "8.10"
      },
      "plugins": ["source-map-support"]
    }]
  ]
}

and webpack.config.js

const path = require('path');
// eslint-disable-next-line import/no-unresolved
const slsw = require('serverless-webpack');

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel-loader'],
      include: __dirname,
      exclude: /node_modules/,
    }],
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
    sourceMapFilename: '[file].map'
  },
};

I don't see any *.map files generated locally. And when executed on lambda still get transpiled location for example fetch.js:36803:20

2018-06-01 17:26:27.085 (+02:00)        25da19e8-65b0-11e8-b7b4-7dd20598dd33    FirstCatch:   TypeError: realFetch.call is not a function
    at Object.fetch (/var/task/src/functions/fetch.js:36803:20)
    at GraphQLClient.<anonymous> (/var/task/src/functions/fetch.js:36700:46)
    at step (/var/task/src/functions/fetch.js:36635:23)
    at Object.next (/var/task/src/functions/fetch.js:36616:53)

I use serverless framework version 1.26.1.

What am I doing wrong?

serverlesspolska on 1 Jun 2018

I figured it out. I needed to add devtool: 'source-map', to webpack config.

serverlesspolska on 1 Jun 2018

👍2

@nenti - any luck on this? did you manage to get it working?

abmohan on 3 Jul 2018

I found a reasonable setup. Cloud logs work great. Local debugging is okayish.

Dependencies:

"babel-core": "6.25.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-source-map-support": "^2.0.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-jest": "^23.0.1",
    "regenerator-runtime": "^0.10.5",
    "serverless": "^1.27.1",
    "serverless-jest-plugin": "^0.1.6",
    "serverless-offline": "^3.23.0",
    "serverless-webpack": "^5.1.5",
    "webpack": "^4.8.3",
    "jest": "^23.1.0",
    "jest-junit": "^5.0.0",
    "jest-sourcemaps": "^1.0.1",
    "webpack-node-externals": "^1.7.2"

Wepack config:

const webpack = require('webpack')
const path = require("path")
const nodeExternals = require('webpack-node-externals')
const slsw = require('serverless-webpack')

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  optimization: {
    minimize: false,
  },
  performance: {
    hints: false,
  },
  devtool: 'source-map',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
      },
    ],
  },
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
    sourceMapFilename: '[file].map',
  },
}

.babelrc

{
  "comments": false,
  "sourceMaps": "both",
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "source-map-support"
  ]
}

Hope it helps.

nenti on 3 Jul 2018

👍4

Awesome, thank you!

abmohan on 3 Jul 2018

Closing this one. As far as I know source maps work in general.

HyperBrain on 7 Jul 2018

👍3

Tried all the above and can't seem to get source-maps working locally.