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 #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.

[synsh]

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:

serverless-webpack/lib/packExternalModules.js

Lines 193 to 214 in 38135e4

	function getExternalModules(stats) {
	if (!stats.compilation.chunks) {
	return [];
	}
	const externals = new Set();
	for (const chunk of stats.compilation.chunks) {
	if (!chunk.modulesIterable) {
	continue;
	}
	// Explore each module within the chunk (built inputs):
	for (const module of chunk.modulesIterable) {
	if (isExternalModule(module)) {
	externals.add({
	origin: _.get(findExternalOrigin(module.issuer), 'rawRequest'),
	external: getExternalModuleName(module)
	});
	}
	}
	}
	return Array.from(externals);
	}

[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

[ghost]

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.

#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

[manelio]

Same problem, but neither the concatenateModules: false workaround nor the Webpack version (5.53.0) seems to work.

The code is working when compiled with Webpack 4. I reduced the code at its minimum:

import { Test1 } from './Test1';
const { Test2 } = require('./Test2');

console.log(Test1, Test2);
// Here Test1 and Test2 are defined

const component = () => {
  return () => {
    console.log(Test1, Test2);
    // Here Test1 is undefined, but Test2 is defined
  }
};

define([], component);

Test1.js and Test2.js are one line files:

export const Test1 = 1

export const Test2 = 2

Maybe the problem here comes from the weird use of requirejs (realize the last define`) for loading my bundled code. But as I said, this has been working for months with Webpack v4.

Anyone has any clue?

[Javarome]

Same problem when using webpack 5.70.0 + webpack-dev-server 4.7.4 + concatenateModules: false.
At runtime, the WDS complains:

Uncaught ReferenceError: require is not defined
    at Object.webpack/hot/log.js (log.js"":1:1)
    at __webpack_require__ (bootstrapp:24:1)
    at fn (hot module replacementt:61:1)
    at Module.../../node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 (WebSocketClient.jss:56:2)
    at __webpack_require__ (bootstrapp:24:1)
    at startupp:4:1
    at startupp:6:1

Did you find a solution/workaround @manelio ?

[vithalreddy]

anyone found solution or workaround for this?

[bazyliszek10000]

Same problem when using webpack 5.75.0.

[vicary]

For anyone who still has this issue, please open up a new issue with a minimum reproduction repo so we can quickly nail down the cause. Thanks a lot.