Document production build process - minified react errors

[nandanrao]

Documentation Issue

I'm trying to understand how to deploy a version of Payload. I've got a Dockerfile that seems reasonable based on the docs and the package.json:

FROM node:18.9.0

WORKDIR /app

COPY ["package.json", "package-lock.json*", "./"]

RUN npm install

COPY . .

ENV NODE_ENV=production
RUN npm run build

ENV PAYLOAD_CONFIG_PATH=dist/payload.config.js
CMD ["node", "dist/server.js" ]

But I end up with frontend that fails with a minified react error:

Minified React error #321

Which expands to:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Version 1.1.1

May I suggest a working Dockerfile would be a nice way to explain how the build is supposed to work in a reproducible manner?

Thanks!

[jmikrut]

Hey @nandanrao — yep. I believe there are a few Dockerfiles in the Discussions, as well as a few on our Discord, but we'll add to our docs with an official version.

#353

This has to do with your Node modules - the error that you're seeing is because your app is using multiple copies of React - but I'm not sure exactly why. Others have seen this problem though and it's just an NPM / React issue. I will convert this to a discussion, but check out the file above!

[nandanrao]

So that discussion shows the exact same error and the "solution" is a workaround that mounts the local node modules from the development machine. But it doesn't actually create a production build in a clean linux environment that doesn't have the error.

My package.json is straight from npm create-payload-app.

A docker container is just a linux environment. Maybe, if you don't have a Dockerfile, you can show me a linux environment where a production build does work?

[nandanrao]

Here's my package.json:

{
  "name": "payload-starter-typescript",
  "description": "Blank template - no collections",
  "version": "1.0.0",
  "main": "dist/server.js",
  "license": "MIT",
  "scripts": {
    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
    "build:server": "tsc",
    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.170.0",
    "@payloadcms/plugin-cloud-storage": "^1.0.8",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "payload": "^1.1.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.9",
    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.6",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

Although, it's not technically "straight from"... I did add the cloud-storage plugin...

[nandanrao]

Hey just wanted to follow up on this - is anyone running payload in production on a linux machine? Would be curious to know.