Serverless-webpack: External modules are not packaged with webpack 5

[janicduplessis]

This is a Bug Report

Description

Since updating to the release version of webpack 5, it seems like external modules are no longer packaged. I investigated a bit and in packExternalModules#getExternalModules I don't see the externals I specify in my webpack config. I checked webpack 5 release notes but could not find a not about that and how to fix it. As a workaround I was able to use stats.compilation.modules instead of chunks and it does include the externals. Not sure if this is a proper fix though.

Similar or dependent issue(s):
N/A

Additional Data

• Serverless-Webpack Version you're using: 5.3.5
• Webpack version you're using: 5.1.3
• Serverless Framework Version you're using: 2.8.0
• Operating System: MacOS 10.15.7
• Stack Trace (if available): N/A

[aecorredor]

Facing the same issue here. Downgrading webpack to 4.44.2 solves the issue for us. We were trying to upgrate to the above mentioned versions when we faced the issue. We also use serverless-plugin-monorepo and yarn workspaces.

Here's the config we use in the monorepo:

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

const babelConfig = require('./babel.config');

// Base webpack config. Other services can extend from it to bundle their
// lambdas.
module.exports = (dirName) => ({
  entry: slsw.lib.entries,
  target: 'node',
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  node: {
    __dirname: true,
  },
  devtool: slsw.lib.webpack.isLocal ? 'nosources-source-map' : undefined,
  externals: [
    nodeExternals(),
    nodeExternals({
      modulesDir: path.resolve(dirName, '../../node_modules'),
    }),
  ],
  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.ts$/,
        include: [
          dirName,
          path.resolve(dirName, '../../common'),
          path.resolve(dirName, '../../config'),
        ],
        exclude: /node_modules/,
        options: {
          presets: babelConfig.presets,
        },
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.mjs', '.js'],
  },
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(dirName, '.webpack'),
    filename: '[name].js',
    sourceMapFilename: '[file].map',
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      // use 'development' unless process.env.NODE_ENV is defined
      NODE_ENV: 'development',
    }),
    new CopyPlugin({
      patterns: [
        { from: `${dirName}/src/assets`, to: 'src/assets' },
      ],
    }),
  ],
});

[j0k3r]

I got the issue too.
I was sure the package was OK with webpack 5 after https://github.com/serverless-heaven/serverless-webpack/pull/472

[lmanerich]

I got this issue too and found that all modules load with:

const myModule = require('myModule')

It works, but loading with

import MyModule from 'myModule';

Does not.

[sahasayan]

Facing the same issue, had to downgrade to [email protected].

Additional Data

• Serverless-Webpack Version you're using: 5.3.5
• Webpack version you're using: 5.3.0
• Serverless Framework Version you're using: 2.8.0
• Operating System: Ubuntu 20.04 LTS
• Stack Trace (if available): N/A

[maxholman]

I was able to work around this by disabling optimization.concatenateModules (defaults to true in production mode)

[crespowang]

I was able to work around this by disabling optimization.concatenateModules (defaults to true in production mode)

Thanks for sharing the workaround. I am wondering what's the reason behind it, and if it is the right solution or there is a better way of fixing the problem.

[alexandrusavin]

@crespowang I guess this might have something to do with the issue:

used here:

https://github.com/serverless-heaven/serverless-webpack/blob/38135e4443c7d7e8506010f0c3e411220abe6f24/lib/packExternalModules.js#L193-L214

[joshuanapoli]

I found that [email protected] packages node modules correctly. Beginning with [email protected], node modules are not packaged.

[PaulContremoulin]

Same issue related, as @maxholman mentions, this configuration :

optimization: {
        // fix node modules not packaged into zip
        concatenateModules: false
    },

work for me !

[derricktang94]

After added the concatenateModules: false option, there is another deprecation warning which is Module.issuer: Use new ModuleGraph API

[clar-cmp]

Also experiencing these issues, and the above workaround also does work. Might be worth pinning this issue so others know about the workaround until it's fixed.

[rstrand]

I had an issue where the workaround compiled but source maps were broken. Rolling back to webpack 4 was the only fix I could get to reliably work.

[Enase]

@j0k3r Is there any chance to fix webpack 5 related issues?

[janicduplessis]

Opened a PR with the fix I've been using for a while. If anyone would like to help test it that'd be awesome, esp webpack4 backwards compat.

https://github.com/serverless-heaven/serverless-webpack/pull/746

[j0k3r]

Thanks @janicduplessis, I'll try on my webpack4 projects next week.

[lmanerich]

One thing to note, using webpack5 and this workaround, result in a much larger app size

optimization: {
        // fix node modules not packaged into zip
        concatenateModules: false
    },

[janicduplessis]

The workaround will not be needed anymore in the upcoming 5.4.1 release! So make sure not to forget to remove it :)

[j0k3r]

5.4.1 was released yesterday: https://github.com/serverless-heaven/serverless-webpack/releases/tag/v5.4.1