Error: Source and destination must not be the same. When using useServerlessTraceTarget

This is most likely some misconfiguration on my part but I can’t figure out what exactly is wrong. I reported this issue with a comment on #405 but I believe it’s more appropriate to create a bug report. Let me know if this isn’t the right way 😃

Describe the bug When running serverless with the Inputs useServerlessTraceTarget: true the build fails with the following output:

$->serverless --debug

  DEBUG ─ Resolving the template's static variables.
  DEBUG ─ Collecting components from the template.
  DEBUG ─ Downloading any NPM components found in the template.
  DEBUG ─ Analyzing the template's components dependencies.
  DEBUG ─ Creating the template's components graph.
  DEBUG ─ Syncing template state.
  DEBUG ─ Executing the template's components graph.

  error:
  Error: Source and destination must not be the same.
    at .serverless/components/registry/npm/serverless-next.js@1.15.0-alpha.0/node_modules/@sls-next/lambda-at-edge/node_modules/fs-extra/lib/util/stat.js:39:17
    at cb (util.js:196:39)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

  100s › webApp › Error: Source and destination must not be the same.

To Reproduce With the following configuration:

• package.json:

  "dependencies": {
    "aws-amplify": "^3.0.18",
    "axios": "^0.19.2",
    "axios-retry": "^3.1.8",
    "babel-loader": "^8.1.0",
    "babel-plugin-styled-components": "^1.10.7",
    "bignumber.js": "^9.0.0",
    "bootstrap": "^4.5.0",
    "dotenv": "^8.2.0",
    "dotenv-webpack": "^1.8.0",
    "firebase": "^7.15.3",
    "humps": "^2.0.1",
    "immer": "^6.0.8",
    "install": "^0.13.0",
    "jquery": "^3.5.1",
    "jwt-decode": "^2.2.0",
    "localforage": "^1.7.4",
    "lodash": "^4.17.15",
    "moment": "^2.27.0",
    "next": "^9.4.4",
    "next-images": "^1.4.0",
    "next-redux-wrapper": "^5.0.0",
    "node-sass": "^4.14.1",
    "npm": "^6.14.5",
    "nprogress": "^0.2.0",
    "prop-types": "^15.7.2",
    "raw-loader": "^4.0.1",
    "react": "^16.13.1",
    "react-bootstrap-table": "^4.3.1",
    "react-burger-menu": "^2.6.17",
    "react-circular-progressbar": "^2.0.3",
    "react-countdown": "^2.2.1",
    "react-dom": "^16.13.1",
    "react-intl": "^3.11.0",
    "react-markdown": "^4.3.1",
    "react-redux": "^7.2.0",
    "react-redux-firebase": "^3.6.0",
    "react-redux-toastr": "^7.6.5",
    "react-retina-image": "^2.0.5",
    "reactstrap": "^8.4.1",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-firestore": "^0.13.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "sass": "^1.26.8",
    "sass-loader": "^8.0.2",
    "styled-components": "^5.1.1",
    "styled-jsx": "^3.3.0",
    "uuid": "^8.1.0",
    "validator": "^13.1.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.3.1",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-no-secrets": "^0.6.8",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4.0.4",
    "eslint-plugin-security": "^1.4.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11",
    "prettier": "^2.0.5",
    "prettier-eslint": "^10.1.1",
    "prettier-eslint-cli": "^5.0.0",
    "serverless-next.js": "^1.15.0-alpha.0",
    "snazzy": "^8.0.0"
  },

• serverless.yml:

webApp:
  component: serverless-next.js@1.15.0-alpha.0
  inputs:
    useServerlessTraceTarget: true
    bucketName: "webAppBucket"
    description: "WebApp Client QA NextJS Lambda@Edge for Cloudfront distribution"
    name:
      defaultLambda: webAppLambda

• next.config.js:

require('dotenv').config();

const withImages = require('next-images');

module.exports = withImages({
  crossOrigin: 'anonymous',
  target: 'experimental-serverless-trace',
});

Desktop (please complete the following information):

• Node v12.14.1

[dphang]

I was also facing the same issue (getting Error: Source and destination must not be the same) and spent some time to debug what’s happening. It seems to originate from: https://github.com/serverless-nextjs/serverless-next.js/blob/d0a630035cab10e6ff70c5706f16c8564227630c/packages/libs/lambda-at-edge/src/build.ts#L106-L128.

I am not too familiar with the code, but it looks like it’s copying node_modules dependencies into lambda handlers when serverlessTraceTarget is enabled: https://github.com/serverless-nextjs/serverless-next.js/blob/d0a630035cab10e6ff70c5706f16c8564227630c/packages/libs/lambda-at-edge/src/build.ts#L156-L160.

In my case, filelist somehow had my src and pages files in it which are .ts and .tsx files, which I guess shouldn’t be copied into the Lambda. This filelist is coming from this line: https://github.com/serverless-nextjs/serverless-next.js/blob/d0a630035cab10e6ff70c5706f16c8564227630c/packages/libs/lambda-at-edge/src/build.ts#L226 (nodeFileTrace)

As a quick debug, I printed out the values of variables from copyLambdaHandlerDependencies for my tsx file:

outputDir: /Users/daniel/IdeaProjects/web-app/.serverless_nextjs
handlerDirectory: default-lambda
serverlessDir: /Users/daniel/IdeaProjects/web-app/.next/serverless
resolvedFilePath: /Users/daniel/IdeaProjects/web-app/src/mui/theme.tsx
dst: ../../src/mui/theme.tsx
joined dst: /Users/daniel/IdeaProjects/web-app/src/mui/theme.tsx (join(this.outputDir, handlerDirectory, dst))

These files like the above fail due to ../../, since when joining the src and dst becomes the same, failing the copy and finally the serverless command. So in this case, it’s not a problem with node-fs-extra.

It works for files in node_modules since the ../../node_modules becomes node_modules due to normalization to remove ../../ in: https://github.com/serverless-nextjs/serverless-next.js/blob/d0a630035cab10e6ff70c5706f16c8564227630c/packages/libs/lambda-at-edge/src/lib/normalizeNodeModules.ts

Example values

outputDir: /Users/daniel/IdeaProjects/web-app/.serverless_nextjs
handlerDirectory: default-lambda
serverlessDir: /Users/daniel/IdeaProjects/web-app/.next/serverless
resolvedFilePath: /Users/daniel/IdeaProjects/web-app/node_modules/yallist/yallist.js
dst: node_modules/yallist/yallist.js
joined dst: /Users/daniel/IdeaProjects/web-app/.serverless_nextjs/default-lambda/node_modules/yallist/yallist.js

Quick Solution

I quickly updated: https://github.com/serverless-nextjs/serverless-next.js/blob/d0a630035cab10e6ff70c5706f16c8564227630c/packages/libs/lambda-at-edge/src/build.ts#L112-L116 but in the compiled build.js directly to filter filepaths that didn’t contain node_modules, and the serverless command succeeds.

return fileList
            .filter((file) => {
            if (!file.includes('node_modules')) {
            	return false;
            }
            return !reasons[file] || reasons[file].type !== "initial";
        }

The above works (and is a quick fix if you’re just deploying from a local machine, for CI/CD you’d have to find the build.js file and do this replacement using sed or similar) but not sure if this is a proper fix that should be a PR? I should figure out why filelist has my ts files, I did set baseUrl: src in my tsconfig.json, maybe that’s why?

@danielcondemarin will also try to get a minimal repro when I get time (can’t share above code since it’s private), but hopefully this is helpful as a start.

FYI, I am running this on Mac OS 10.15.5 / Macbook Pro 16

[danielcondemarin]

Any luck with the repo I provided ?

I am not sure I understand which Source and destination this error is referring to. It’s not building pages under the .serverless_nextjs/default-lambda, I am guessing that could be what this is about.

I tried removing all non essentials files from the project to see if that affect anything(things like editor config files etc…), but it doesn’t change the issue.

Thanks for the repro! I’ve not had a had a chance to look into it but I’m hoping to get some time this weekend.