"Package.json does not exist" error in Webpack Directory

[RBrNx]

Description

I am currently trying to use the Argon2 package with Serverless, however I am encountering an issue when attempting to run my Lambdas locally with serverless-offline.

The local server does boot up, but as soon as I try to load the API URL in my Browser it crashes with the following error:

offline: Failure: package.json does not exist at /Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/package.json
Error: package.json does not exist at /Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/package.json
    at Object.../node_modules/node-pre-gyp/lib/pre-binding.js.exports.find (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/webpack:/node_modules/node-pre-gyp/lib/pre-binding.js:18:1)
    at Object.../node_modules/argon2/argon2.js (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/webpack:/node_modules/argon2/argon2.js:8:1)
    at __webpack_require__ (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/webpack:/webpack/bootstrap:19:1)
    at Module../src/graphql/resolvers/Event.js (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/server.js:291038:64)
    at __webpack_require__ (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/webpack:/webpack/bootstrap:19:1)
    at Module../src/graphql/index.js (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/server.js:290958:74)
    at __webpack_require__ (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/webpack:/webpack/bootstrap:19:1)
    at Module../src/server.js (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/server.js:292165:72)
    at __webpack_require__ (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/webpack:/webpack/bootstrap:19:1)
    at /Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/webpack:/webpack/bootstrap:83:1
    at Object.<anonymous> (/Users/conor/Documents/Projects/Personal/wedding-project/wedding-api/.webpack/service/src/server.js:87:10)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at /Users/conor/Documents/Projects/Personal/wedding-project/node_modules/serverless-offline/dist/lambda/handler-runner/in-process-runner/InProcessRunner.js:145:133
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at InProcessRunner.run (/Users/conor/Documents/Projects/Personal/wedding-project/node_modules/serverless-offline/dist/lambda/handler-runner/in-process-runner/InProcessRunner.js:145:9)

Here is my webpack and serverless-webpack configs:

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 do 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$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
    ],
  },
};

I'm not entirely sure where the problem lies, should there be a package.json in the .webpack folder? or is it something else entirely?

Additional Data

• Serverless-Webpack Version you're using: ^5.1.0
• Webpack version you're using: ^4.16.2
• Serverless Framework Version you're using: 2.9.0
• Operating System: MacOS 11.0.1 Big Sur

[Nightbr]

Hey, I found a solution, you need to add the package argon2 to externals:

    externals:
      - argon2

Note: I'm using serverless-bundle which use serverless-webpack Note2: If you need the lib argon2 in the lambda, you will need to copy the node_modules in your zip file

[Nightbr]

Another solutions that work and is easy to setup is to use argon2-browser, it is slower than the native compiled lib but could work for use-cases in Lambda. Here is how to set this up:

1. install argon2-browser (yarn or npm)
2. In your serverless config under custom.bundle or webpack (where you can configure alias package), we will tell webpack to use argon2-browser instead of the argon2 nodejs lib

   aliases:
     - 'argon2': '../node_modules/argon2-browser/dist/argon2-bundled.min.js' 

Resource: https://stackoverflow.com/questions/69319614/invalid-elf-header-argon2-package