next build failed in docker building, but success in local environment.

[Debonex]

I'm trying to import svg as react component in next, according to https://dev.to/dolearning/importing-svgs-to-next-js-nna, I add @svgr/webpack to my next.config.js, so I can import svg file as a react component, and next build works well.

But when I was trying to build docker image, next build didn't work well.

logs of docker build

 > [builder 5/5] RUN yarn build:
#15 0.647 yarn run v1.22.19
#15 0.728 $ next build
#15 1.706 info  - Linting and checking validity of types...
#15 2.083 warn  - No ESLint configuration detected. Run next lint to begin setup
#15 7.487 info  - Creating an optimized production build...
#15 16.40 Failed to compile.
#15 16.40
#15 16.40 ./components/layouts/BaseLayout.tsx
#15 16.40 Module not found: Can't resolve 'components/blog/svg/github.svg' in '/app/components/layouts'
#15 16.40
#15 16.40 Import trace for requested module:
#15 16.40 ./pages/_app.tsx
#15 16.40
#15 16.40
#15 16.40 > Build failed because of webpack errors
#15 16.44 error Command failed with exit code 1.
#15 16.44 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
executor failed running [/bin/sh -c yarn build]: exit code: 1

next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
  output: "standalone",
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

module.exports = nextConfig;

Dockerfile

# https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

# Install dependencies only when needed
FROM node:16-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# If using npm with a `package-lock.json` comment out above and use below instead
# COPY package.json package-lock.json ./ 
# RUN npm ci

# Rebuild the source code only when needed
FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# If using npm comment out above and use below instead
# RUN npm run build

# Production image, copy all the files and run next
FROM node:16-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

# Automatically leverage output traces to reduce image size 
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

development environment:

• windows 10 x64
• node version: 16.14.0

repo for reproduction: https://github.com/Debonex/debonex-blog/tree/deploy

[icyJoseph]

In the Dockerfile it says:

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./

So you need to uncomment that line, and let it copy the next.config.js file.

# You only need to copy next.config.js if you are NOT using the default configuration
COPY --from=builder /app/next.config.js ./

Edit - Solution

import GithubSvg from "components/blog/svg/github.svg";

Is incorrect because the file system has:

components
├── Test.tsx
├── blog
│   ├── Keyword.tsx
│   └── svg
│       └── Github.svg
└── layouts
    └── BaseLayout.tsx

The right import ought to be:

import GithubSvg from "components/blog/svg/Github.svg";

[Debonex]

I tried to uncomment the line, but the error still exists. I'm not familiar with docker, is next.config.js already copied at the builder stage with the command COPY . .? But the error occurs at the command yarn build which is at the builder stage.

[icyJoseph]

Ah sorry I was too fast to point the error.

I think the issue is that your file is called Github.svg, but you are pointing to github.svg, I'll try to build the docker image with that.

[icyJoseph]

Yes that was it. Updating answer. I guess it was a Windows thing.

[Debonex]

Thanks, it works! 😘

[fbartho]

3 years later and I ran into the same issue. There was a single letter typo that took hours until I read this thread to resolve. Thanks @icyJoseph!