Skip to content
This repository was archived by the owner on Jan 28, 2025. It is now read-only.
This repository was archived by the owner on Jan 28, 2025. It is now read-only.

Circular dependency on webpack_require when building with serverless #1772

Open
Open
Circular dependency on webpack_require when building with serverless#1772
Labels
bugSomething isn't workinggood first issueGood for newcomers
@kacperaniolek

Description

@kacperaniolek
kacperaniolek
opened on Sep 30, 2021

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

  • You have reviewed the README and FAQs, which answers several common questions.
  • You have reviewed our DEBUGGING wiki and have tried your best to include complete information and reproduction steps (including your configuration) as is possible.
  • 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood first issueGood for newcomers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions