Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

node.js - Numerous webpack errors during lambda bundle packaging

0 votes
159 views
in Technique[技术] by (71.8m points)

node.js - Numerous webpack errors during lambda bundle packaging

I am building a Shopify app with the aim to deploy it as AWS Lambda. After hitting 250 MB limitation, I am trying to optimise the package with webpack.js.

The problem is that during optimisation webpack gives tons of warnings and errors and do not understand, why I am getting them. I would really appreciate if you could have a look at this problem and give recommendations, how can this be fixed.

Here are the examples of errors that I get:

WARNING in ./node_modules/next/node_modules/browserslist/node.js 161:26-33
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/next/node_modules/browserslist/index.js
 @ ./node_modules/next/dist/compiled/babel/bundle.js
 @ ./node_modules/next/dist/compiled/babel/core.js
 @ ./node_modules/next/dist/telemetry/events/version.js
 @ ./node_modules/next/dist/telemetry/events/index.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server.js

WARNING in ./node_modules/next/dist/next-server/server/next-server.js 6:309-335
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/next/dist/server/next.js
 @ ./server.js

WARNING in ./node_modules/next/dist/build/webpack-config.js
Module not found: Error: Can't resolve '@zeit/next-less' in ‘./node_modules/next/dist/build'
 @ ./node_modules/next/dist/build/webpack-config.js
 @ ./node_modules/next/dist/server/hot-reloader.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server.js

WARNING in ./node_modules/loader-runner/lib/loadLoader.js 5:2-28
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./node_modules/loader-runner/lib/LoaderRunner.js 7:17-40
 @ (webpack)/lib/NormalModule.js
 @ (webpack)/lib/NormalModuleFactory.js
 @ (webpack)/lib/Compiler.js
 @ (webpack)/lib/webpack.js
 @ ./node_modules/@next/react-dev-overlay/lib/middleware.js
 @ ./node_modules/next/dist/server/hot-reloader.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server.js

ERROR in ./node_modules/next/dist/next-server/server/render.js
Module not found: Error: Can't resolve 'critters' in ‘./node_modules/next/dist/next-server/server'
 @ ./node_modules/next/dist/next-server/server/render.js 60:15-34
 @ ./node_modules/next/dist/next-server/server/next-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server.js

ERROR in ./node_modules/sharp/build/Release/sharp.node 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./node_modules/sharp/lib/output.js 4:14-52
 @ ./node_modules/sharp/lib/index.js
 @ ./node_modules/next/dist/next-server/server/image-optimizer.js
 @ ./node_modules/next/dist/next-server/server/next-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server.js

ERROR in server.js from Terser
"e" is redeclared [server.js:152519,234891]

Here is webpack.config.js:

const slsw = require('serverless-webpack');
module.exports = {
  mode: 'production',
  entry: slsw.lib.entries,
  resolve: {
    extensions: ['.mjs', '.js']
  },
  module: {
    rules: [
      {
        test: /.mjs$/,
        include: /node_modules/,
        loader: "babel-loader",
        type: 'javascript/auto'
      }
    ]
  }
};

This is how project directory look like:

.DS_Store
.babelrc
.env
.git
.gitignore
.next
LICENSE.txt
components
node_modules
pages
serverless.yml
README.md
mix-manifest.json
package-lock.json
server
webpack.config.js
app 
next.config.js
package.json
server.js

The contents of serverless.yml:

service: app
useDotenv: true

package:
  individually: true

plugins:
- serverless-apigw-binary
- serverless-offline
- serverless-aws-static-file-handler/plugins/BinaryMediaTypes
- serverless-webpack

custom:
  webpack:
    webpackConfig: './webpack.config.js'
    includeModules: false
    packager: 'npm'
  apiGateway:
    binaryMediaTypes:
      - image/png
      - image/jpeg
      - "*/*"
  apigwBinary:
    types:
      - application/javascript
      - application/json
      - application/octet-stream
      - application/xml
      - font/eot
      - font/opentype
      - font/otf
      - image/jpeg
      - image/png
      - image/svg+xml
      - text/comma-separated-values
      - text/css
      - text/html
      - text/javascript
      - text/plain
      - text/text
      - text/xml
  defaultStage: prod

provider:
  name: aws
  runtime: nodejs12.x
  stage: ${opt:stage, self:custom.defaultStage}
  environment:
    appName: ${env:APP_NAME}
    HOST: ${env:HOST}
    NODE_ENV: ${env:NODE_ENV}
    API_VERSION: ${env:API_VERSION}
    SHOPIFY_API_KEY: ${env:SHOPIFY_API_KEY}
    SHOPIFY_API_SECRET: ${env:SHOPIFY_API_SECRET}
  stackName: ${self:service}-stack
  apiGateway:
    shouldStartNameWithService: true
  deploymentBucket:
    name: ${self:service}-api-upload-bucket-${self:provider.stage}
  iamRoleStatements:
    - Effect: Allow
      Action:
        - dynamodb:Query
        - dynamodb:Scan
        - dynamodb:GetItem
        - dynamodb:PutItem
        - dynamodb:UpdateItem
        - dynamodb:DeleteItem
        - dynamodb:BatchGetItem
        - dynamodb:BatchWriteItem
      Resource: "arn:aws:dynamodb:${opt:region, self:provider.region}:*:table/${self:service}-${self:provider.stage}-*"
    - Effect: Allow
      Action:
        - dynamodb:Query
        - dynamodb:Scan
        - dynamodb:GetItem
        - dynamodb:PutItem
        - dynamodb:UpdateItem
        - dynamodb:DeleteItem
      Resource: "arn:aws:dynamodb:${opt:region, self:provider.region}:*:table/${self:service}-${self:provider.stage}-*/index/*"
functions:
  authIndex:
    handler: server.handler
    events:
      - http:
          path: /
          method: ANY
          cors: true
      - http:
          path: /{proxy+}
          method: ANY
          cors: true
#  webhookUninstall:
#    handler: app/webhooks.uninstall
#    events:
#      - http:
#          path: webhooks/uninstall
#          method: post
#  webhookGDPR:
#    handler: app/webhooks.gdpr
#    events:
#      - http:
#          path: webhooks/gdpr
#          method: post

resources:
  Resources:
    OnboardingTable:
      Type: AWS::DynamoDB::Table
      DeletionPolicy: Retain
      Properties:
        TableName: ${self:service}-${self:provider.stage}-onboarding
        AttributeDefinitions:
          - AttributeName: shopId
            AttributeType: S
          - AttributeName: domain
            AttributeType: S
        KeySchema:
          - AttributeName: shopId
            KeyType: HASH
        GlobalSecondaryIndexes:
          - IndexName: domain-index
            KeySchema:
              - AttributeName: domain
                KeyType: HASH
            Projection:
              ProjectionType: ALL
        BillingMode: PAY_PER_REQUEST
    RegisteredMerchantTable:
      Type: AWS::DynamoDB::Table
      DeletionPolicy: Retain
      Properties:
        TableName: ${self:service}-${self:provider.stage}-registered-merchant
        AttributeDefinitions:
          - AttributeName: shopId
            AttributeType: S
          - AttributeName: domain
            AttributeType: S
        KeySchema:
          - AttributeName: shopId
            KeyType: HASH
        GlobalSecondaryIndexes:
          - IndexName: domain-index
            KeySchema:
              - AttributeName: domain
                KeyType: HASH
            Projection:
              ProjectionType: ALL
        BillingMode: PAY_PER_REQUEST

My server.js file:

'use strict';

const dotenv  = require('dotenv');
const Koa     = require('koa');
const sls     = require('serverless-http');
const next    = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');

dotenv.config();

const { default: graphQLProxy } = require('@shopify/koa-shopify-graphql-proxy');
const Router = require('koa-router');
const {receiveWebhook, registerWebhook} = require('@shopify/koa-shopify-webhooks');

const { ApiVersion } = require('@shopify/koa-shopify-graphql-proxy');
const getSubscriptionUrl = require('./server/getSubscriptionUrl');

const dev = process.env.NODE_ENV !== 'production';
const zapp = next({ dir: '.', dev: dev });
const handle = zapp.getRequestHandler();

const { SHOPIFY_API_SECRET, SHOPIFY_API_KEY, HOST } = process.env;

console.log('env: ' + JSON.stringify(process.env));

//  await zapp.prepare().then(() => {
    const server = new Koa();
    const router = new Router();

    server.use(session({ secure: true, sameSite: 'none' }, server));
    server.keys = [SHOPIFY_API_SECRET];

    server.use(
        createShopifyAuth({
            apiKey: SHOPIFY_API_KEY,
            secret: SHOPIFY_API_SECRET,
            scopes: ['read_products', 'write_products'],
            async afterAuth(ctx) {
                const { shop, accessToken } = ctx.session;
                ctx.cookies.set('shopOrigin', shop, {
                    httpOnly: false, secure: true, sameSite: 'none'
                });
                console.log('before registration of webhooks: accessToken = ' + JSON.stringify(accessToken));
                const registration = await registerWebhook({
                    address: `${HOST}/webhooks/products/create`,
                    topic: 'PRODUCTS_CREATE',
                    accessToken: accessToken,
                    shop: shop,
                    apiVersion: ApiVersion.October20
                });
                if (registration.success) {
                    console.log('Successfully registered webhook!');
                } else {
                    console.log('Failed to register webhook', registration.result);
                }
                await getSubscriptionUrl(ctx, accessToken, shop);
            },
        }),
    );
    server.use(graphQLProxy({version: ApiVersion.October20}))
    server.use(verifyRequest());
    server.use(async (ctx) => {
        await handle(ctx.req, ctx.res);
        ctx.respond = false;
        ctx.res.statusCode = 200;
        return
    });

module.exports.handler = sls(server)
question from:https://stackoverflow.com/questions/65881906/numerous-webpack-errors-during-lambda-bundle-packaging

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

57.0k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...