Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack not bundling everything into one file

See original GitHub issue

This is a Bug Report

I am trying to use this to bundle all of my dependencies into a JS file. Currently, it is dumping everything into an eval with none of the imports resolved. I am using TypeScript.

Description

Here is my webpack config:

const { resolve } = require('path');

const slsw = require('serverless-webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const {
    compilerOptions: { baseUrl, paths },
} = require('../tsconfig.json');

// const app = Object.keys(slsw.lib.entries)[0].split('/')[2];

const alias = Object.entries(paths).reduce((acc, [key, value]) => {
    const newKey = key.replace(/\/\*/g, '');

    if (!acc[newKey]) {
        acc[newKey] = resolve(__dirname, '../', baseUrl, value[0].replace(/\/\*/g, '') + '/');
    }

    return acc;
}, {});

module.exports = {
    mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
    target: 'node',
    entry: slsw.lib.entries,
    output: {
        libraryTarget: 'commonjs',
        path: resolve(__dirname, '../.webpack'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias,
        plugins: [
            new TsconfigPathsPlugin({
                configFile: resolve(__dirname, '../tsconfig.sls.json'),
                extensions: ['.ts', '.js'],
            }),
        ],
    },
    module: {
        noParse: /test/gi,
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                include: resolve(__dirname, '../src'),
            },
        ],
    },
};

For bug reports:

What went wrong? My lambda file only has the contents of the entry point. None of the imports are resolved.
What did you expect should have happened? All the dependencies should have been bundled into the lambda file

What was the config you used?

  plugins:
  	- serverless-webpack
  	- serverless-plugin-optimize
      - serverless-dotenv-plugin

  package:
  	individually: true

  custom:
  	webpack:
      	packager: yarn
          webpackConfig: webpack/webpack.config.sls.js
  	    excludeFiles: '**/*test*'
      	includeModules:
          	forceExclude:
              	- aws-sdk

What stacktrace or error message from your provider did you see?

Built at: 12/29/2020 6:05:31 PM
                      Asset      Size                    Chunks             Chunk Names
src/apps/auth/src/lambda.js  7.05 KiB  src/apps/auth/src/lambda  [emitted]  src/apps/auth/src/lambda
Entrypoint src/apps/auth/src/lambda = src/apps/auth/src/lambda.js
[./src/apps/auth/src/lambda.ts] 3.06 KiB {src/apps/auth/src/lambda} [built]
Serverless: Optimize: starting engines
Serverless: Optimize: nest-serverless-lambda-demo-dev-auth
Error: Cannot find module '@globals/create-lambda'
Require stack:
- /Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js
- /Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/plugins/aws/invokeLocal/index.js
- /Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/plugins/index.js
- /Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/classes/PluginManager.js
- /Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/Serverless.js
- /Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/scripts/serverless.js
- /Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/bin/serverless.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1065:15)
    at Function.Module._load (internal/modules/cjs/loader.js:911:27)
    at Module.require (internal/modules/cjs/loader.js:1125:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at o (/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:1:492)
    at /Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:1:683
    at eval (webpack:///./src/apps/auth/src/lambda.ts?:40:23)
    at Object../src/apps/auth/src/lambda.ts (/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:2:1745)
    at __webpack_require__ (/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:2:285)
    at ./src/apps/auth/src/lambda.ts (/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:2:1611)
    at Object.1 (/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:2:1686)
    at o (/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:1:632)
    at r (/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:1:798)
    at /Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:1:827
    at /Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:1:88
    at Object.<anonymous> (/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js:1:323)
    at Module._compile (internal/modules/cjs/loader.js:1236:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1257:10)
    at Module.load (internal/modules/cjs/loader.js:1085:32)
    at Function.Module._load (internal/modules/cjs/loader.js:950:14)
    at Module.require (internal/modules/cjs/loader.js:1125:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at AwsInvokeLocal.invokeLocalNodeJs (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/plugins/aws/invokeLocal/index.js:737:33)
    at AwsInvokeLocal.invokeLocal (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/plugins/aws/invokeLocal/index.js:219:19)
    at Object.invoke:local:invoke [as hook] (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/plugins/aws/invokeLocal/index.js:50:41)
    at /Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/classes/PluginManager.js:521:55
    at tryCatcher (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/util.js:16:23)
    at Object.gotValue (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/reduce.js:168:18)
    at Object.gotAccum (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/reduce.js:155:25)
    at Object.tryCatcher (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromise0 (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/promise.js:729:18)
    at _drainQueueStep (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/async.js:93:12)
    at _drainQueue (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/node_modules/bluebird/js/release/async.js:15:14)
    at processImmediate (internal/timers.js:458:21) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/sam/Work/personal/test-api/.webpack/auth/_optimize/nest-serverless-lambda-demo-dev-auth/src/apps/auth/src/lambda.js',
    '/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/plugins/aws/invokeLocal/index.js',
    '/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/plugins/index.js',
    '/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/classes/PluginManager.js',
    '/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/lib/Serverless.js',
    '/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/scripts/serverless.js',
    '/Users/sam/.nvm/versions/node/v14.6.0/lib/node_modules/serverless/bin/serverless.js'
  ]
}

For feature proposals:

What is the use case that should be solved. The more detail you describe this in the easier it is to understand for us.
If there is additional config how would it look

Similar or dependent issue(s):

None

Additional Data

Serverless-Webpack Version you’re using: 5.3.5
Webpack version you’re using: 4.4.x
Serverless Framework Version you’re using: 2.16.1
Operating System: macOS Big Sur 11.1
Stack Trace (if available):

Here is the generated output file:

(function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./src/apps/auth/src/lambda.ts");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/apps/auth/src/lambda.ts":
/*!*************************************!*\
  !*** ./src/apps/auth/src/lambda.ts ***!
  \*************************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("\"use strict\";\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n    function verb(n) { return function (v) { return step([n, v]); }; }\n    function step(op) {\n        if (f) throw new TypeError(\"Generator is already executing.\");\n        while (_) try {\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n            if (y = 0, t) op = [op[0] & 2, t.value];\n            switch (op[0]) {\n                case 0: case 1: t = op; break;\n                case 4: _.label++; return { value: op[1], done: false };\n                case 5: _.label++; y = op[1]; op = [0]; continue;\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                default:\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n                    if (t[2]) _.ops.pop();\n                    _.trys.pop(); continue;\n            }\n            op = body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n    }\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.handler = void 0;\nvar create_lambda_1 = require(\"@globals/create-lambda\");\nvar auth_module_1 = require(\"./auth.module\");\nvar server;\n(function () {\n    return __awaiter(this, void 0, void 0, function () {\n        return __generator(this, function (_a) {\n            switch (_a.label) {\n                case 0: return [4, create_lambda_1.bootstrapServer(auth_module_1.AuthModule)];\n                case 1:\n                    server = _a.sent();\n                    return [2];\n            }\n        });\n    });\n})();\nexports.handler = create_lambda_1.createHandler(server);\n\n\n//# sourceURL=webpack:///./src/apps/auth/src/lambda.ts?");

/***/ })

/******/ })));

Issue Analytics

State:
Created 3 years ago
Comments:9

Top GitHub Comments

1reaction

samrith-scommented, Jan 21, 2021

Hey @rcoundon I think it’s GitHub messing the indentation. I have Prettier setup so it errors out if the indentation is incorrect.

Also, cool I will check that out!

0reactions

samrith-scommented, May 10, 2021

@gastonrey Sure!

Sharing relevant parts of Serverless YAML:

package:
    individually: true
plugins:
    - 'serverless-dotenv-plugin'
    - 'serverless-scriptable-plugin'
    - 'serverless-webpack'
    - 'serverless-prune-plugin'
    - 'serverless-offline'
custom:
    prune:
        automatic: true
        includeLayers: true
        number: 10
    schematic:
        memorySize: 2048
        warmup: true
        timeout: 30
        reservedConcurrency: 1
    serverless-offline:
        httpPort: 4000
    webpack:
        webpackConfig: 'webpack/webpack.config.sls.js'
        excludeFiles: '**/*test*'
        includeModules:
            forceExclude:
                - 'aws-sdk'
        keepOutputDirectory: true
        packager: 'yarn'

And tsconfig


{
    "exclude": ["**/*.spec.ts", "node_modules", "test", "schematic"],
    "compilerOptions": {
        "moduleResolution": "node",
        "lib": ["es2017"],
        "declaration": false,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "noUnusedLocals": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "target": "es2017",
        "sourceMap": true,
        "outDir": "./dist",
        "baseUrl": "./src",
        "rootDir": ".",
        "incremental": true,
        "strictBindCallApply": true,
        "skipLibCheck": true,
        "noImplicitAny": true,
    }
}

Top Results From Across the Web

Get Webpack not to bundle files - Stack Overflow

Webpack's sole purpose is to do bundling; are you sure you don't want any bundling, or do you just want some things to...

How webpack decides what to bundle - Jakob Lind

Everything starts with the entry file · Webpack builds a dependency graph used internally · Webpack shakes out dead code from the dependency...

Output Management - webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...

WTF is a Webpack - What Problem Does It Solve?

Said another way, we don't want all our JavaScript in one file. We may also wish to use ... Surprisingly, webpack *.js >...

Modern Approach of JavaScript Bundling With Webpack

You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies...