I can't build a docker image error with typescript-CodePudding

Hi I can't build a docker image using the docker build . in next.js app

Receives an error

error: failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1
Error: buildx failed with: error: failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1

Entire logs

#1 [internal] load .dockerignore
#1 transferring context: 2B done
#1 DONE 0.0s
#2 [internal] load build definition from Dockerfile
#2 transferring dockerfile: 214B done
#2 DONE 0.0s
#3 [internal] load metadata for docker.io/library/node:16-alpine
#3 ...
#4 [auth] library/node:pull token for registry-1.docker.io
#4 DONE 0.0s
#3 [internal] load metadata for docker.io/library/node:16-alpine
#3 DONE 0.9s
#5 [internal] load build context
#5 DONE 0.0s
#6 [1/8] FROM docker.io/library/node:16-alpine@sha256:da32af0cf608622b1550678b2552b7d997def7d0ada00e0eca0166ed2ea42186
#6 resolve docker.io/library/node:16-alpine@sha256:da32af0cf608622b1550678b2552b7d997def7d0ada00e0eca0166ed2ea42186 done
#6 DONE 0.0s
#7 importing cache manifest from gha:14737076832837719571
#7 DONE 0.5s
#5 [internal] load build context
#5 transferring context: 21.45MB 1.1s done
#5 DONE 1.1s
#6 [1/8] FROM docker.io/library/node:16-alpine@sha256:da32af0cf608622b1550678b2552b7d997def7d0ada00e0eca0166ed2ea42186
#6 sha256:86937321b535acf01ac5d7f108ead204d1c6a71f9a1c4402e8317ece72d1f6c8 453B / 453B 0.2s done
#6 sha256:b831dd745300d07e75a46ae8805ad39a4164cf888686f4a45ed782a26fd0d50c 2.34MB / 2.34MB 0.2s done
#6 sha256:95ca4541bf43fa13f7c3ef511d8b0f1a156a738645582a3c7e27a7b3fdebf4e3 35.68MB / 35.68MB 0.7s done
#6 sha256:530afca65e2ea04227630ae746e0c85b2bd1a179379cbf2b6501b49c4cab2ccc 2.80MB / 2.80MB 0.4s done
#6 extracting sha256:530afca65e2ea04227630ae746e0c85b2bd1a179379cbf2b6501b49c4cab2ccc 0.3s done
#6 extracting sha256:95ca4541bf43fa13f7c3ef511d8b0f1a156a738645582a3c7e27a7b3fdebf4e3
#6 extracting sha256:95ca4541bf43fa13f7c3ef511d8b0f1a156a738645582a3c7e27a7b3fdebf4e3 1.7s done
#6 DONE 2.5s
#6 [1/8] FROM docker.io/library/node:16-alpine@sha256:da32af0cf608622b1550678b2552b7d997def7d0ada00e0eca0166ed2ea42186
#6 extracting sha256:b831dd745300d07e75a46ae8805ad39a4164cf888686f4a45ed782a26fd0d50c 0.1s done
#6 extracting sha256:86937321b535acf01ac5d7f108ead204d1c6a71f9a1c4402e8317ece72d1f6c8 done
#6 DONE 2.6s
#8 [2/8] RUN mkdir /app
#8 DONE 1.5s
#9 [3/8] WORKDIR /app
#9 DONE 0.0s
#10 [4/8] COPY ./ ./
#10 DONE 0.1s
#11 [5/8] RUN yarn add typescript
#11 0.320 yarn add v1.22.19
#11 0.449 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
#11 0.488 [1/4] Resolving packages...
#11 1.252 [2/4] Fetching packages...
#11 18.54 [3/4] Linking dependencies...
#11 18.55 warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#11 18.55 warning "next-images > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#11 18.55 warning "next-images > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#11 25.70 [4/4] Building fresh packages...
#11 45.42 success Saved lockfile.
#11 45.53 success Saved 1 new dependency.
#11 45.53 info Direct dependencies
#11 45.54 └─ [email protected]
#11 45.54 info All dependencies
#11 45.54 └─ [email protected]
#11 45.55 Done in 45.23s.
#11 DONE 51.2s
#12 [6/8] RUN yarn add --dev @types/react
#12 1.135 yarn add v1.22.19
#12 1.260 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
#12 1.301 [1/4] Resolving packages...
#12 1.967 [2/4] Fetching packages...
#12 2.651 [3/4] Linking dependencies...
#12 2.659 warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#12 2.660 warning "next-images > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#12 2.660 warning "next-images > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#12 5.046 [4/4] Building fresh packages...
#12 5.111 success Saved lockfile.
#12 5.119 warning "@types/react" is already in "dependencies". Please remove existing entry first before adding it to "devDependencies".
#12 5.230 success Saved 1 new dependency.
#12 5.232 info Direct dependencies
#12 5.234 └─ @types/[email protected]
#12 5.235 info All dependencies
#12 5.235 └─ @types/[email protected]
#12 5.243 Done in 4.12s.
#12 DONE 5.5s
#13 [7/8] RUN yarn install
#13 0.355 yarn install v1.22.19
#13 0.483 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
#13 0.491 [1/4] Resolving packages...
#13 0.979 success Already up-to-date.
#13 1.002 Done in 0.66s.
#13 DONE 1.0s
#14 [8/8] RUN yarn run build
#14 0.350 yarn run v1.22.19
#14 0.414 $ next build
#14 1.207 info  - Loaded env from /app/.env.production
#14 1.718 info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
#14 2.096 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#14 2.097 This information is used to shape Next.js' roadmap and prioritize features.
#14 2.097 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#14 2.097 https://nextjs.org/telemetry
#14 2.097 
#14 2.164 info  - Checking validity of types...
#14 2.175 It looks like you're trying to use TypeScript but do not have the required package(s) installed.
#14 2.175 
#14 2.175 Please install @types/react by running:
#14 2.175 
#14 2.175   yarn add --dev @types/react
#14 2.175 
#14 2.175 If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
#14 2.175 
#14 2.240 error Command failed with exit code 1.
#14 2.241 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#14 ERROR: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1
------
 > [8/8] RUN yarn run build:
#14 2.175 It looks like you're trying to use TypeScript but do not have the required package(s) installed.
#14 2.175 
#14 2.175 Please install @types/react by running:
#14 2.175 
#14 2.175   yarn add --dev @types/react
#14 2.175 
#14 2.175 If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
#14 2.175 
#14 2.240 error Command failed with exit code 1.
#14 2.241 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
Dockerfile:13
--------------------
  11 |     RUN yarn install
  12 |     
  13 | >>> RUN yarn run build
  14 |     CMD yarn run start
  15 |     
--------------------
error: failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1
Error: buildx failed with: error: failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1

Docker file

FROM node:16-alpine

RUN mkdir /app
WORKDIR /app

COPY ./ ./

RUN yarn install
RUN yarn install --dev typescript

RUN yarn run build

CMD yarn run start

package.json

"dependencies": {
    "@popperjs/core": "^2.11.5",
    "axios": "^0.27.2",
    "bootstrap": "^5.0.1",
    "countup.js": "^2.1.0",
    "cypress": "^10.3.0",
    "eslint": "^8.14.0",
    "eslint-config-next": "^12.1.5",
    "formik": "^2.2.9",
    "next": "10.2.3",
    "next-images": "^1.8.4",
    "react": "17.0.2",
    "react-bootstrap": "^2.4.0",
    "react-countup": "^6.2.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "17.0.2",
    "react-feather": "^2.0.10",
    "react-gtm-module": "^2.0.11",
    "react-highlight-words": "^0.18.0",
    "react-paginate": "^8.1.3",
    "react-use-audio-player": "^1.2.6",
    "sass": "^1.34.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@types/bootstrap": "^5.1.12",
    "@types/react": "^18.0.15",
    "@types/react-gtm-module": "^2.0.1",
    "@types/react-highlight-words": "^0.16.4"
  }
}

CodePudding user response：

The next.js repository has an example using Docker. It says "To add support for Docker to an existing project, just copy the Dockerfile into the root of the project and add the following to the next.config.js file:"

module.exports = {
  // ... rest of the configuration.
  output: 'standalone',
}

The Dockerfile it wants you to copy is linked here and the documentation for adding Docker to next.js is linked here. This automatically has support for typescript so you don't have to worry about that.

CodePudding user response：

Your build logs tell me that you're using a package-lock.json file generated by npm instead of a yarn.lock file generated by yarn. This could cause the module resolution (@types/react) issues that you're seeing.

Also, this line concerns me:

#12 5.119 warning "@types/react" is already in "dependencies". Please remove existing entry first before adding it to "devDependencies".

It seems like the package.json you listed in your question does not match the file your build is actually using.

Not an accusation, but this error could be caused by multiple things. I suspect this line from your dockerfile could be the culprit:

COPY ./ ./

Without knowing your directory structure, this could copy literally anything into your image. Maybe it's copying a conflicting package-lock.json from your host machine?

Additionally, if you're building within the container, you should use Docker's multistage builds to shrink the final image size. You don't have to worry about the size of extra devDependencies (like yarn and typescript) this way.

Codify your devDependencies! It makes it easier to share your app/package with other developers.

If you're using npm, your Dockerfile should look like this:

###############
# build stage #
###############

FROM node:16-alpine AS build

ARG NODE_ENV="development"

WORKDIR /app

COPY package.json package-lock.json tsconfig.json ./

# installs both production and dev dependencies
RUN npm ci

RUN npm run build

###############
# final stage #
###############

FROM node:16-alpine

ARG NODE_ENV="production"

COPY package.json package-lock.json ./

# installs only production dependencies
RUN npm ci

COPY --from=build ./build ./build

USER node

CMD npm run start

Note: This build assumes that typescript is listed in your devDependencies.

If you're using yarn, your Dockerfile should look like this:

###############
# build stage #
###############

FROM node:16-alpine AS build

ARG NODE_ENV="development"

WORKDIR /app

COPY package.json yarn.lock tsconfig.json ./

# installs both production and dev dependencies
RUN yarn install

RUN yarn run build

###############
# final stage #
###############

FROM node:16-alpine

ARG NODE_ENV="production"

COPY package.json yarn.lock ./

# installs only production dependencies
RUN yarn install

# wherever your tsc build output is
COPY --from=build ./build ./build

USER node

CMD yarn run start