Circular dependency on webpack_require when building with serverless

[kacperaniolek]

Issue Summary

Building with serverless results in an error:

Build error occurred
TypeError: Class extends value undefined is not a constructor or null
    at Object.13766 (/app/.next/serverless/chunks/9643.js:21190:46)
    at __webpack_require__ (/app/.next/serverless/pages/index.js:6394:43)
    at Object.20098 (/app/.next/serverless/chunks/9643.js:24646:14)
    at __webpack_require__ (/app/.next/serverless/pages/index.js:6394:43)
    at Object.81736 (/app/.next/serverless/chunks/9643.js:24608:14)
    at __webpack_require__ (/app/.next/serverless/pages/index.js:6394:43)
    at Object.75885 (/app/.next/serverless/chunks/3410.js:268:72)
    at __webpack_require__ (/app/.next/serverless/pages/index.js:6394:43)
    at Object.89283 (/app/.next/serverless/chunks/2819.js:1107:79)
    at __webpack_require__ (/app/.next/serverless/pages/index.js:6394:43) {
  type: 'TypeError'
}

whereas regular yarn build/node_modules/.bin/next build works fine.

Actual behavior

serverless fails while building the project, suggesting there is a circular dependency with:

Command failed with exit code 1: node_modules/.bin/next build
(...)
Build error occurred
TypeError: Class extends value undefined is not a constructor or null
    at Object.13766 (/app/.next/serverless/chunks/9643.js:21190:46)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.20098 (/app/.next/serverless/chunks/9643.js:24646:14)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.81736 (/app/.next/serverless/chunks/9643.js:24608:14)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.75885 (/app/.next/serverless/chunks/3410.js:268:72)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.89283 (/app/.next/serverless/chunks/2819.js:1107:79)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43) {
  type: 'TypeError'
}

The pages/...js:...:.. part differs from trial to trial, ie. it seems that no matter what page it is, serverless will complain.

Expected behavior

The project is built and ready for deployment.

Steps to reproduce

1. Have a node:14-alpine based image with the project files and its dependencies up and running.
2. Prepare a simple serverless.yml in the project root
3. Run npm install -g serverless in the container
4. Execute serverless

Screenshots/Code/Configuration/Logs

/app/.next/serverless/chunks/9643.js:21190:46:

const typescript_collections_1 = __webpack_require__(77318);
const internal_1 = __webpack_require__(20098);
class Board extends typescript_collections_1.Dictionary {

Dockerfile:

FROM node:14-alpine

WORKDIR /app

COPY . /app

ENV NODE_ENV development
RUN apk add python3 make g++ & yarn

EXPOSE 3000
CMD ["yarn", "dev"]

serverless.yml:

myapp:
  component: "@sls-next/serverless-component@latest"

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "paths": {
      "@theme": ["src/core/theme"],
      "@theme/*": ["src/core/theme/*"],
      "@components/*": ["src/components/*"],
      "@services/*": ["src/services/*"],
      "@helpers/*": ["src/helpers/*"],
      "@types/*": ["src/types/*"],
      "@utils/*": ["src/utils/*"],
      "@store": ["src/store"],
      "@store/*": ["src/store/*"],
      "@public/*": ["public/*"],
      "@icons": ["src/components/elements/molecules/Icons/index"],
      "src/*": ["src/*"]
    }
  },
  "include": ["next-env.d.ts", "styled.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
  "files": [
    "@types/block-content-to-react.d.ts",
    "@types/react-twitter-embed.d.ts",
    "@types/country-flag-icons-react-3x2.d.ts"
  ]
}

serverless --debug output:

/app # 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.
info  - Loaded env from /app/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...

./src/pages/watch/index.tsxloying 
88:70  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
100:51  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any

./src/components/elements/atoms/Dropdown/Dropdown.tsx
17:52  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
17:57  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any

./src/components/elements/molecules/Carousel/ButtonsWrapper.tsx
85:31  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types

./src/components/elements/molecules/DropdownCheckbox/MultiValue.tsx
8:36  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types
27:27  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types

./src/components/elements/molecules/HamburgerMenu/Separator.tsx
3:19  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types

(...)

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info  - Creating an optimized production build...
info  - Using external babel configuration from /app/.babelrc
info  - Collecting page data...

  error:
  Error: Command failed with exit code 1: node_modules/.bin/next build
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
(node:242) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:242) [DEP_WEBPACK_CHUNK_ADD_MODULE] DeprecationWarning: Chunk.addModule: Use new ChunkGraph API
warn  - Compiled with warnings

./src/components/elements/atoms/CountryFlag/CountryFlag.tsx
Attempted import error: 'countries'.'includes' is not exported from 'country-flag-icons' (imported as 'countries').

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

(node:242) UnhandledPromiseRejectionWarning: TypeError: Class extends value undefined is not a constructor or null
    at Object.13766 (/app/.next/serverless/chunks/9643.js:21190:46)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.20098 (/app/.next/serverless/chunks/9643.js:24646:14)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.81736 (/app/.next/serverless/chunks/9643.js:24608:14)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.75885 (/app/.next/serverless/pages/_error.js:3914:72)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.89283 (/app/.next/serverless/chunks/2819.js:1107:79)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
(node:242) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)
(node:242) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:242) UnhandledPromiseRejectionWarning: TypeError: Class extends value undefined is not a constructor or null
    at Object.13766 (/app/.next/serverless/chunks/9643.js:21190:46)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.20098 (/app/.next/serverless/chunks/9643.js:24646:14)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.81736 (/app/.next/serverless/chunks/9643.js:24608:14)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.75885 (/app/.next/serverless/pages/_error.js:3914:72)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.89283 (/app/.next/serverless/chunks/2819.js:1107:79)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
(node:242) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)

> Build error occurred
TypeError: Class extends value undefined is not a constructor or null
    at Object.13766 (/app/.next/serverless/chunks/9643.js:21190:46)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.20098 (/app/.next/serverless/chunks/9643.js:24646:14)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.81736 (/app/.next/serverless/chunks/9643.js:24608:14)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.75885 (/app/.next/serverless/chunks/3410.js:268:72)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.89283 (/app/.next/serverless/chunks/2819.js:1107:79)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43) {
  type: 'TypeError'
}
info  - Loaded env from /app/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...

./src/pages/watch/index.tsx
88:70  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
100:51  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any

./src/components/elements/atoms/Dropdown/Dropdown.tsx
17:52  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
17:57  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any

./src/components/elements/molecules/Carousel/ButtonsWrapper.tsx
85:31  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types

./src/components/elements/molecules/DropdownCheckbox/MultiValue.tsx
8:36  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types
27:27  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types

./src/components/elements/molecules/HamburgerMenu/Separator.tsx
3:19  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types

(...)

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info  - Creating an optimized production build...
info  - Using external babel configuration from /app/.babelrc
info  - Collecting page data...
    at makeError (/root/.serverless/components/registry/npm/@sls-next/serverless-component@3.3.0/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/root/.serverless/components/registry/npm/@sls-next/serverless-component@3.3.0/node_modules/execa/index.js:118:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Builder.build (/root/.serverless/components/registry/npm/@sls-next/serverless-component@3.3.0/node_modules/@sls-next/lambda-at-edge/dist/build.js:359:13) {
  shortMessage: 'Command failed with exit code 1: node_modules/.bin/next build',
  command: 'node_modules/.bin/next build',
  escapedCommand: '"node_modules/.bin/next" build',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: 'info  - Loaded env from /app/.env.local\n' +
 (...)
    '}',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}

  265s › myapp › Error: Command failed with exit code 1: node_modules/.bin/next build
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
(node:242) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:242) [DEP_WEBPACK_CHUNK_ADD_MODULE] DeprecationWarning: Chunk.addModule: Use new ChunkGraph API
warn  - Compiled with warnings

./src/components/elements/atoms/CountryFlag/CountryFlag.tsx
Attempted import error: 'countries'.'includes' is not exported from 'country-flag-icons' (imported as 'countries').

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

(node:242) UnhandledPromiseRejectionWarning: TypeError: Class extends value undefined is not a constructor or null
    at Object.13766 (/app/.next/serverless/chunks/9643.js:21190:46)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.20098 (/app/.next/serverless/chunks/9643.js:24646:14)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.81736 (/app/.next/serverless/chunks/9643.js:24608:14)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.75885 (/app/.next/serverless/pages/_error.js:3914:72)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.89283 (/app/.next/serverless/chunks/2819.js:1107:79)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
(node:242) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)
(node:242) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:242) UnhandledPromiseRejectionWarning: TypeError: Class extends value undefined is not a constructor or null
    at Object.13766 (/app/.next/serverless/chunks/9643.js:21190:46)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.20098 (/app/.next/serverless/chunks/9643.js:24646:14)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.81736 (/app/.next/serverless/chunks/9643.js:24608:14)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.75885 (/app/.next/serverless/pages/_error.js:3914:72)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
    at Object.89283 (/app/.next/serverless/chunks/2819.js:1107:79)
    at __webpack_require__ (/app/.next/serverless/pages/_error.js:4529:43)
(node:242) UnhandledPromiseRejectionWarning: Unhandled promise rejecchess24v2-fe
> Build error occurred
TypeError: Class extends value undefined is not a constructor or null
    at Object.13766 (/app/.next/serverless/chunks/9643.js:21190:46)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.20098 (/app/.next/serverless/chunks/9643.js:24646:14)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.81736 (/app/.next/serverless/chunks/9643.js:24608:14)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.75885 (/app/.next/serverless/chunks/3410.js:268:72)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43)
    at Object.89283 (/app/.next/serverless/chunks/2819.js:1107:79)
    at __webpack_require__ (/app/.next/serverless/pages/news/[slug].js:2440:43) {
  type: 'TypeError'
}
info  - Loaded env from /app/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...

./src/pages/watch/index.tsx
88:70  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
100:51  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any

./src/components/elements/atoms/Dropdown/Dropdown.tsx
17:52  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
17:57  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any

./src/components/elements/molecules/Carousel/ButtonsWrapper.tsx
85:31  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types

./src/components/elements/molecules/DropdownCheckbox/MultiValue.tsx
8:36  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types
27:27  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types

./src/components/elements/molecules/HamburgerMenu/Separator.tsx
3:19  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types
exports.id = 9643;
exports.ids = [9643];
exports.id = 9643;
exports.ids = [9643];
exports.id = 9643;
exports.ids = [9643];
(...)
    toString() {
        return this.getMove().toString();
    }
}
exports.MoveNode = MoveNode;

Versions

• OS/Environment: running in node:14-alpine based Docker container, Ubuntu host
• @sls-next/serverless-component version: @sls-next/serverless-component - 2.60.0
• Next.js version: next - 11.1.2

Additional context

It seems the error is related to our internal dependency (that chunks... lines are the ones using our libs), but what is suprising, it builds successfully with a regular next build.

Checklist

• [x] You have reviewed the README and FAQs, which answers several common questions.
• [x] You have reviewed our DEBUGGING wiki and have tried your best to include complete information and reproduction steps (including your configuration) as is possible.
• [x] You have first tried using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

[dphang]

Hm I'm not sure quite sure why that's that would be the case, could you provide a sample repo to demonstrate the issue? Though as a workaround for now, you could always run with inputs.build: false and run just the packaging/deploy part