Serverless-webpack: Cannot find module 'source-map-support/register

Created on 13 Sep 2018 · 9Comments · Source: serverless-heaven/serverless-webpack

Description

I've followed the webpack4 example to setup the config:
https://github.com/serverless-heaven/serverless-webpack/tree/master/examples/babel-webpack-4
As I got the error "cannot find module source-map-support/register" ,I've looked into the already created issues on this :
https://github.com/serverless-heaven/serverless-webpack/issues/357
https://github.com/serverless-heaven/serverless-webpack/issues/228

Now my config is :

.babelrc

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

webpack.config.js:

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


module.exports = {
  entry: slsw.lib.entries,
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
    sourceMapFilename: '[file].map',

  },
  optimization: {
    // We no not want to minimize our code.
    minimize: false,
  },
  performance: {
    // Turn off size warnings for entry points
    hints: false,
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, 'src')],
        exclude: /node_modules/,
      },
      {
        test: /\.json$/,
        loader: 'json',
        include: path.join(__dirname, 'src'),
      },
    ],
  },
  externals: [nodeExternals()],
  devtool: 'source-map',


};

package.json

{
  "name": "someservice",
  "version": "2.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest --config --colors",
    "lint": "eslint . --max-warnings=0 --report-unused-disable-directives && echo '✔  Your .js files look good.'"
  },
  "author": "[email protected]",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-jest": "^23.4.2",
    "babel-loader": "^7.1.5",
    "babel-plugin-source-map-support": "^2.0.1",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-plugin-transform-inline-environment-variables": "^6.8.0",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-stage-2": "^6.24.1",
    "eslint": "^5.4.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "13.1.0",
    "eslint-loader": "^2.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jest": "^21.22.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.1.0",
    "eslint-plugin-security": "^1.4.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^23.5.0",
    "jest-transform-stub": "^1.0.0",
    "lint-staged": "^7.2.2",
    "prettier-eslint": "^8.8.2",
    "prettier-eslint-cli": "^4.3.2",
    "serverless-jest-plugin": "^0.1.6",
    "serverless-offline": "^3.25.11",
    "serverless-webpack": "^5.2.0",
    "standard": "^12.0.1",
    "webpack": "^4.17.3",
    "webpack-node-externals": "^1.7.2",
    "babel-runtime": "^6.22.0"
  },
  "dependencies": {
    "aws-sdk": "^2.11.0",
    "source-map-support": "^0.5.9"
  }
}

serverless.yml

service: someservice
plugins:
  - serverless-offline
  - serverless-webpack
provider:
  name: aws
  runtime: nodejs6.10
  region: us-east-1
  stage: ${env:STAGE}

custom:
  webpackConfig: ./webpack.config.js
  includeModules: true

functions:
  getUser:
     handler: src/user/UserHandler.getUser
     memory: 512
     timeout: 60
     events:
       - http:
            method: get
            path: user
            cors: true
            integration: lambda

  createUser:
     handler: src/user/UserHandler.createUser
     memory: 512
     timeout: 60
     events:
       - http:
            method: post
            path: user
            cors: true
            integration: lambda

I still face the same issue .
It works fine with sls invoke local -f
But when deployed to aws using sls deploy , it shows the error when the API Url is invoked.

npm version : 6.4.1
node version : v10.10.0
serverless : 1.30.3

question documentation

Source

shivamsk

👍3

Most helpful comment

Hi @shivamsk, did @bradennapier's advice work for you? We do something similar, could definitely be improved upon though:

webpack.config.js:

const path = require('path');
const slsw = require('serverless-webpack');

const entries = {};

Object.keys(slsw.lib.entries).forEach(
  key => (entries[key] = ['./source-map-install.js', slsw.lib.entries[key]])
);

module.exports = {
  entry: entries,
  ...
};

source-map-install.js:

require('source-map-support').install();

hassankhan on 26 Apr 2019

👍3 👎2 ❤1

All 9 comments

Hi @shivamsk ,
did you already try to do a fresh npm install after removing the node_modules folder and clearing the npm cache npm cache clean --force?

HyperBrain on 28 Sep 2018

It will only work if you manually add source-map-support/register in your webpack externals.

bradennapier on 13 Oct 2018

👍2

Hi @shivamsk, did @bradennapier's advice work for you? We do something similar, could definitely be improved upon though:

webpack.config.js:

const path = require('path');
const slsw = require('serverless-webpack');

const entries = {};

Object.keys(slsw.lib.entries).forEach(
  key => (entries[key] = ['./source-map-install.js', slsw.lib.entries[key]])
);

module.exports = {
  entry: entries,
  ...
};

source-map-install.js:

require('source-map-support').install();

hassankhan on 26 Apr 2019

👍3 👎2 ❤1

I had this same problem but it wound up to be an issue with the serverless.yml:

  custom:
  webpack:
    webpackConfig: ./webpack.config.js 
    includeModules: true

instead of

custom:
  webpack:
    webpackConfig: ./webpack.config.js 
    includeModules: true

which resulted in the custom webpack directive of 'includeModules: true' not being passed in.

After fixing this, i could see source-map-support automatically being pulled in via the webpack output:

Serverless: Packing external modules: source-map-support@^0.5.13, moment@^2.24.0, unirest@^0.6.0, google-spreadsheet@^2.0.7, promise-limit@^2.7.0, dotenv@^8.1.0

nothing extra was needed in webpack.config.js externals. I just have:

module.exports = {
...
  devtool: 'source-map',
  externals: [nodeExternals()],
...
}

@shivamsk Your serverless.yml looks like it had formatting issues too:

custom:
  webpackConfig: ./webpack.config.js
  includeModules: true

instead of:

custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true

clarsen on 2 Sep 2019

@shivamsk I got around this issue in a monorepo by adding a script to package.json. Be sure to adjust the path if your path is different from mine.

  "scripts": {
    "postinstall": "cp -a ../node_modules/source-map-support ./node_modules/source-map-support"
  },

NoelBaron on 16 Jan 2020

👍1

I've got this problem too, babel w/ source-map-support plugin, webpack config with devTool: 'source-map', yet none of the solutions here make things better. Is there any documentation about how this is should be set up?