Serverless-webpack: Cannot find module with serverless-offline (looking in .build/.webpack instead of .webpack)

Created on 23 Jul 2020 · 6Comments · Source: serverless-heaven/serverless-webpack

This is a (Bug Report)

Description

For bug reports:

What went wrong?
I am using serverless-webpack with typescript and want to use serverless-offline
everything compile and run properly, but when try to call the handler through API route, noticed the path it referring is wrong.

offline: Failure: Cannot find module '/Users/nader/Projects/company/4m-bamboohr-xero-integration/.build/.webpack/service/src/functions/approved-leaves/getTimeOffRequests'

What did you expect should have happened?
expected it to be
offline: Failure: Cannot find module '/Users/nader/Projects/company/4m-bamboohr-xero-integration/.webpack/service/src/functions/approved-leaves/getTimeOffRequests'

What was the config you used?
webpack config

mode: isLocal ? 'development' : 'production',
  entry: slsw.lib.entries,
  devtool: isLocal ? 'cheap-module-eval-source-map' : 'source-map',
  resolve: {
    extensions: ['.mjs', '.json', '.ts'],
    symlinks: false,
    cacheWithContext: false,
  },
  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },

tsconfig

  "compilerOptions": {
    "lib": ["es2017"],
    "module": "commonjs",
    "removeComments": true,
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "target": "es2017",
    "outDir": ".build",
    "sourceRoot": "/",
    "rootDir": "./src"
  },

Similar or dependent issue(s):

#241

Additional Data

Serverless-Webpack Version you're using: 5.3.2
Webpack version you're using:4.29.0
Serverless Framework Version you're using:1.74.1
Operating System: macOS
Stack Trace (if available):

Source

nitronaj

Most helpful comment

@nitronaj I fixed this by removing serverless-plugin-typescript and leaving serverless-webpack alone. If you think of it you don't need both because you compile the code with webpack. So when you are using both these plugins typescript code is compiled by both and there is some mess created.

LukaszKuciel on 30 Jul 2020

❤4

All 6 comments

How is your serverless.yml config? How to do you launch serverless offline?

j0k3r on 23 Jul 2020

the serverless.yml

service:
  name: service-4m-bamboohr-xero
# app and org for use with dashboard.serverless.com
app: bamboohr-xero-integration
# org: company

provider:
  name: aws
  runtime: nodejs12.x
  stage: ${opt:stage, 'dev'}
  region: ap-southeast-2

  iamRoleStatements:
    - Effect: Allow
      Action:
        - dynamodb:DescribeTable
        - dynamodb:Query
        - dynamodb:Scan
        - dynamodb:GetItem
        - dynamodb:PutItem
        - dynamodb:BatchWriteItem
      Resource: 'arn:aws:dynamodb:#{AWS::Region}:#{AWS::AccountId}:table/${self:custom.dynamodb.employeeTable}'
    - Effect: Allow
      Action:
        - ssm:PutParameter
        - ssm:GetParameters
        - ssm:GetParameter
        - ssm:GetParametersByPath
      Resource:
        - 'arn:aws:ssm:#{AWS::Region}:#{AWS::AccountId}:parameter/4m/*'
        - 'arn:aws:ssm:#{AWS::Region}:#{AWS::AccountId}:parameter/${self:provider.stage}/*'
    - Effect: Allow
      Action:
        - sqs:SendMessage
      Resource: 'arn:aws:sqs:#{AWS::Region}:#{AWS::AccountId}:${self:custom.sqsQueue.getRatesQueue}'

  environment:
    DYNAMODB_EMPLOYEE_TABLE: ${self:custom.dynamodb.employeeTable}
    DYNAMODB_LEAVE_TABLE: ${self:custom.dynamodb.leaveTable}
    SSM_OAUTH_PATH: /${self:provider.stage}/${self:app}/oauth/
    SSM_BAMBOOHR_PATH: /${self:provider.stage}/${self:app}/bamboohr/
    SSM_XERO_PATH: /${self:provider.stage}/${self:app}/xero/
    REGION: '#{AWS::Region}'
    ACCOUNT_ID: '#{AWS::AccountId}'
    SQS_GETRATES_QUEUE: ${self:custom.sqsQueue.getRatesQueue}
    SQS_LEAVE_QUEUE: ${self:custom.sqsQueue.getRatesQueue}
    NAMESPACE: ${self:app}
    ENVIRONMENT: ${self:provider.stage}

functions:
  saveEmployees:
    handler: src/functions/map-employees/saveEmployees.saveEmployees
    events:
      - http:
          method: post
          path: employees
          cors: true
          integration: 'lambda'
          # request:
          #   schema:
          #     application/json: ${file(src/schema/create_employees.json)}

  getEmployees:
    handler: src/functions/map-employees/getEmployees.getEmployees
    events:
      - http:
          method: get
          path: employees
          cors: true

  enqueueEmployees:
    handler: src/functions/enqueueEmployees.enqueueEmployees
    events:
      - http:
          method: get
          path: enqueueEmployees
          cors: true

  getTimeOffRequests:
    handler: src/functions/approved-leaves/getTimeOffRequests.getTimeOffRequests
    events:
      - http:
          method: get
          path: leaves
          cors: true

  getXeroEmployees:
    handler: ./src/functions/xero/getXeroEmployees.getXeroEmployees
    events:
      - http:
          method: get
          path: xero/employees
          cors: true

  getBamboohrEmployees:
    handler: src/functions/bamboohr/getBamboohrEmployees.getBamboohrEmployees
    events:
      - http:
          method: get
          path: bamboohr/employees
          cors: true

  updateXeroEmployeeRate:
    handler: src/functions/xero/updateXeroEmployeeRate.updateXeroEmployeeRate
    events:
      - sqs:
          arn:
            Fn::GetAtt:
              - GetRatesQueue
              - Arn

# Add the serverless-webpack plugin
plugins:
  - serverless-webpack
  - serverless-plugin-typescript
  - serverless-plugin-optimize
  - serverless-pseudo-parameters
  - serverless-dynamodb-local
  - serverless-offline-ssm
  - serverless-offline
custom:
  dynamodb:
    employeeTable: ${self:service}-tblEmployee-${self:provider.stage}
    leaveTable: ${self:service}-tblLeave-${self:provider.stage}
    migrate: true
    # creates tables from serverless config
    seed: true
    #determines which data to onload
    stages: ${self:provider.stage}

  serverless-offline-ssm:
    stages: ${self:provider.stage}

  sqsQueue:
    getRatesQueue: ${self:service}-getRatesQueue-${self:provider.stage}
    leaveQueue: ${self:service}-leaveQueue-${self:provider.stage}

  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true
    packager: npm

  stage: ${opt:stage, self:provider.stage}

resources:
  - ${file(resources/dynamo-db.yml)}
  - ${file(resources/sqs.yml)}

package:
  exclude:
    - node_modules/**/*
  include:
    - src/functions/*
  excludeDevDependencies: false

the run
sls offline start

nitronaj on 24 Jul 2020

I have the exact same issue. For some reason when I run serverless offline start I get two folders .build and .webpack in root directory instead of .build/.webpack.

LukaszKuciel on 28 Jul 2020

LukaszKuciel on 30 Jul 2020

❤4

@nitronaj I fixed this by removing serverless-plugin-typescript and leaving serverless-webpack alone. If you think of it you don't need both because you compile the code with webpack. So when you are using both these plugins typescript code is compiled by both and there is some mess created.

Thanks a lot!!