Help: ES6 import gives "module initialization error: TypeError"

[cyberbound]

This is a Bug Report

Bug report or me doing something wrong.

Description

I get the error module initialization error: TypeError when I use ES6 imports. Everything builds and deploys but I get the error when I trigger the lambda with the import statement. I've been trying to solve this by using different configurations and solutions that I've found around the web but can't get it to work.

My lambda function:

'use strict';

import { helpMe } from '../lib/helpers';

module.exports.handle = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: helpMe(),
      input: event,
    }),
  };
};

My helper class with the export:

export function helpMe () {
  return 'Im helping';
}

serverless.yml

service: serverless-es6-import

provider:
  name: aws
  runtime: nodejs8.10

plugins:
  - serverless-webpack

package:
  individually: true

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

functions:
  - ${file(functions/test.yml)}

.babelrc

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

webpack.config.js

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

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  // Generate sourcemaps for proper error messages
  devtool: 'source-map',
  // Since 'aws-sdk' is not compatible with webpack,
  // we exclude all node dependencies
  externals: [nodeExternals()],
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  optimization: {
    // We no not want to minimize our code.
    minimize: false,
  },
  performance: {
    // Turn off size warnings for entry points
    hints: false,
  },
  // Run babel on all .js files and skip those in node_modules
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: __dirname,
        exclude: /node_modules/,
      },
    ],
  },
};

package.json

{
  "name": "serverless-es6-import",
  "version": "1.0.0",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "source-map-support": "^0.5.10"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.3",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-source-map-support": "^2.0.1",
    "serverless-webpack": "^5.2.0",
    "webpack": "^4.29.5",
    "webpack-node-externals": "^1.7.2"
  }
}

Similar or dependent issue(s):

• Bug: module initialization error TypeError #448
• Bug: module initialization error: TypeError #353
• How to deal with obscure cloudwatch logs?  #291
• Unable to import module 'handler': Error revisited #230

Additional Data

• Serverless-Webpack Version you're using: 5.2.0
• Webpack version you're using: 4.29.5
• Serverless Framework Version you're using: 1.35.1
• Operating System: Ubuntu 18.04.2 LTS
• Stack Trace (if available): module initialization error: TypeError

[Zn4rK]

Please refer to the webpack documentation:
https://webpack.js.org/configuration/resolve/#resolveextensions

tl;dr - Add this to your webpack.config.js:

resolve: {
   extensions: ['.js']
}

[cyberbound]

Thanks for the tip @Zn4rK, I've been on that page a few times during trying to get this to work. Unfortunately it didn't do any difference. I still get the same error. I've tried using setups I've found in example repos as well without any luck.

Any other tips on what might be wrong?

[cyberbound]

I created a public repository with my setup and that gives me the error when I deploy it. Should I change my webpack.config.js to work with my folder structure or something like that? broken serverless-es6-import

[Zn4rK]

Change:

module.exports.handle = [code]

to:

export const handle = [code]

If you really want to use module.exports instead, you need to define it first.

module.exports = { handle: [code] }

You should also put the package source-map-support in devDependencies.

[Zn4rK]

I would also recommend the package serverless-offline. It's good for detecting these sorts of things :).

[cyberbound]

Finally it works, thank you @Zn4rK !

FYI, putting source-map-support in devDependencies resulted in the following error:

Unable to import module 'lambdas/test': Error
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/var/task/lambdas/test.js:92:18)
at __webpack_require__ (/var/task/lambdas/test.js:21:30)
at Module.<anonymous> (/var/task/lambdas/test.js:102:17)
at __webpack_require__ (/var/task/lambdas/test.js:21:30)
at /var/task/lambdas/test.js:85:18
at Object.<anonymous> (/var/task/lambdas/test.js:88:10)

However it works when I keep it in as a dependency, so I'll just keep it in there :) And thanks for the tip about serverless-offline, will keep that in mind for future headaches.

[catamphetamine]

FYI
For me, it was source-map-support that discarded the actual error message and stack trace.
Once I commented out the source-map-support import line then the error started showing the actual error message and stack trace.
evanw/node-source-map-support#240