Production Build Failure - TypeError: (0 , react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV) is not a function #1163

[Wetradetogether]

Please check that this issue hasn't been reported before.

• [X] I searched previous Bug Reports didn't find any similar reports.

Expected Behavior

While migrating our application from a development to a production environment, we encountered a TypeError: (0 , react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV) is not a function error. This issue occurs when the NODE_ENV variable is switched from "development" to "production". . The application operates perfectly in the development environment, but the error appears in the production environment, both locally (on an Ubuntu system) and in a public network on an AWS Ubuntu instance and using Docker Compose.

Current behaviour

After setting NODE_ENV to "production", I expect that the application will successfully build and deploy using Docker Compose. Once deployed, authentication should take place via OAuth provider after entering the client key and secret key. This transition from "development" to "production" is mainly to ensure that the OAuth authentication mechanism is in place and functioning correctly.

Steps to reproduce

After setting NODE_ENV to "production", I expect that the application will successfully build and deploy using Docker Compose. Once deployed, authentication should take place via OAuth provider after entering the client key and secret key. This transition from "development" to "production" is mainly to ensure that the OAuth authentication mechanism is in place and functioning correctly.

Possible solution

If there is an alternate solution to successfully implement and test OAuth authentication in the production environment (without triggering the aforementioned error), that would be welcome too.

Which Operating Systems are you using?

• [ ] Android
• [ ] iPhone/iPad
• [X] Linux
• [ ] macOS
• [ ] Windows

Acknowledgements

• [X] My issue title is concise, descriptive, and in title casing.
• [X] I have searched the existing issues to make sure this bug has not been reported yet.
• [X] I am using the latest version of AgentGPT.
• [X] I have provided enough information for the maintainers to reproduce and diagnose the issue.

[awtkns]

Hey @Wetradetogether what version of node are you running this on?

[Paperino123]

This Dockerfile-prod is designed for the "production" environment of a Node.js application. It uses a multi-stage build approach to create an efficient, compact, and secure Docker image suitable for production deployment. What follows is an indicative proposal of a Dockerfile-prod for production.

1. Multi-stage build: The Dockerfile employs a technique known as a "multi-stage build." This technique helps to create leaner and more secure Docker images by including only the necessary files and dependencies to run the application in the final image.

2. Dependencies and Building: The first stage, named "deps," installs the application's dependencies. The second stage, called "builder," copies the dependencies installed in the first stage and builds the application. Note that the npm ci command is run in the first stage and npm run build in the second.

3. Running: The third stage, "runner," is dedicated to running the application. The necessary files are copied from the "builder" stage and the container is set up to run the application.

4. Environment Configuration: The NODE_ENV environment variable is set to production, signalling to Node.js (and libraries that make use of it) to optimize for production. The NEXT_TELEMETRY_DISABLED variable is set to 1, turning off Next.js telemetry.

5. Entrypoint and Command: The entrypoint is configured to run the entrypoint.sh script and the default command to start the container is npm start, which initiates the application in production mode.

6. Comments and Unused Code: This Dockerfile contains several commented lines. These lines could be used to add a non-root system user (for security reasons) and to copy additional files. If they are not being used, they could be removed to reduce the complexity of the Dockerfile.

Remember, constructing a Dockerfile largely depends on your project's specific needs. The differences between this Dockerfile and one for a development environment reflect the differing needs between development and production environments. For example, the development environment might require additional debugging tools, while the production environment should be optimized for size, performance, and security.

Please note that this is a indicative proposal and should be adapted to suit the specific requirements of your project.

Dockerfile-prod

FROM node:19-alpine AS deps RUN apk add --no-cache libc6-compat WORKDIR /app

COPY package.json package-lock.json ./

Install dependencies

RUN npm ci RUN npm install

FROM node:19-alpine AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . .

RUN npm install #RUN prisma generate

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

FROM node:19-alpine AS runner

Needed for the wait-for-db script

RUN apk add --no-cache netcat-openbsd

WORKDIR /next

ENV NODE_ENV production ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs

RUN adduser --system --uid 1001 nextjs

COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next

COPY --from=builder /app/ ./ COPY --from=builder /app/.next ./.next COPY --from=builder /app/.env ./.env COPY --from=builder /app/entrypoint.sh /entrypoint.sh COPY --from=builder /app/wait-for-db.sh /usr/local/bin/wait-for-db.sh #COPY --from=builder /app/wait-for-db.sh ./wait-for-db.sh #COPY --from=builder /app/prisma ./prisma #COPY --from=builder /app/node_modules ./node_modules #COPY --from=builder /app/package.json ./package.json

RUN chmod +x /usr/local/bin/wait-for-db.sh

USER nextjs

EXPOSE 3000

ENV PORT 3000

ENTRYPOINT ["sh", "/entrypoint.sh"]

WORKDIR /next

CMD ["npm", "start"]

[Paperino123]

So, that's the rundown, @wetradetogether! Hope it makes things a bit clearer. Remember, no question is too small or too big - if you've got more, just fire away! Always happy to help out where I can. Cheers!

[Wetradetogether]

Hi @awtkns, my node version is v18.0.0

[superlbr]

here's my solution.

1. set output: 'standalone' in next.config.mjs
2. Dockfile

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base 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 && npm install -g npm
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY prisma package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base 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 base AS runner
RUN apk add --no-cache dos2unix netcat-openbsd
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

COPY --from=builder /app/public ./public

# 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
COPY --from=builder --chown=nextjs:nodejs /app/wait-for-db.sh /usr/local/bin/wait-for-db.sh
COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/entrypoint.sh /

RUN chmod +x /usr/local/bin/wait-for-db.sh \
    && dos2unix /entrypoint.sh

USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

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