facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.58k stars 26.8k forks source link

Build fails with NODE_ENV=production in Docker #8980

Closed misha-erm closed 4 years ago

misha-erm commented 4 years ago

Describe the bug

Hello, I'm trying to build my CRA docker image but react-scripts build fails with the error below when I install only "dependencies". Looks like it tries to use global ESLint instead of local one

Please note: when I do same steps not in docker but on my mac everything is OK. Also everything is OK when I install dependencies in docker with NODE_ENV=development

Did you try recovering your dependencies?

I use npm 6.14.4 . Tried to delete package-lock and reinstall all the deps

Which terms did you search for in User Guide?

Looked through every section in documentation

Environment

Environment Info:

current version of create-react-app: 3.4.1 running from /Users/ermolaev/.npm/_npx/77206/lib/node_modules/create-react-app

System: OS: macOS 10.15.3 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Binaries: Node: 12.16.2 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Browsers: Chrome: 81.0.4044.138 Firefox: 71.0 Safari: 13.0.5 npmPackages: react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-scripts: 3.4.1 => 3.4.1 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

  1. run docker build .

Here is my dockerfile:

FROM node:12.16.3-alpine AS builder

ENV CI=true \
  NODE_ENV=production \
  GENERATE_SOURCEMAP=false \
  SKIP_PREFLIGHT_CHECK=true

WORKDIR /usr/src/app

# Install

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

RUN npm ci --ignore-scripts --no-optional

# Build

COPY src ./src
COPY public ./public

RUN npm run build

RUN for f in $(find ./build -type f -name '*.html' -o -name '*.ico' -o -name '*.css' -o -name '*.js' -o -name '*.json' -o -name '*.map'); \
  do gzip -9c "$f">"$f.gz"; \
  done

# Serve

FROM nginx:1.18.0-alpine

COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY nginx/conf.d/frontend.conf /etc/nginx/conf.d/frontend.conf
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

Expected behavior

react-scripts build should end with success

Actual behavior

Build fails:

image

Reproducible demo

I'll attach a link to a repo a little bit later

misha-erm commented 4 years ago

Here is my package.json:

{
  "name": "cast-calls-client",
  "version": "0.0.1",
  "scripts": {
    "prestart": "npm run build:styles",
    "start": "react-scripts start",
    "build:styles": "tailwind build ./src/tailwind.pcss -o ./src/tailwind-out.css -c ./src/tailwind.config.js ",
    "prebuild": "npm run build:styles",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "flow": "flow",
    "prestorybook": "npm run build:styles",
    "storybook": "start-storybook -p 9009 -s public",
    "prebuild-storybook": "npm run build:styles",
    "build-storybook": "build-storybook -s public",
    "format": "prettier --write \"**/*.{js,jsx,json,css,md,html,yml}\"",
    "lint": "eslint '**/*.{js,jsx}'",
    "lint:css": "stylelint '**/*.{js,jsx,css}'"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm run test -- --watchAll=false"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "**/*.module.{css}": [
      "stylelint --allow-empty-input"
    ],
    "**/*.{json,md,html,css,yml}": [
      "prettier --write"
    ]
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.28",
    "@fortawesome/free-brands-svg-icons": "5.13.0",
    "@fortawesome/free-regular-svg-icons": "5.13.0",
    "@fortawesome/free-solid-svg-icons": "5.13.0",
    "@fortawesome/react-fontawesome": "0.1.9",
    "@reach/listbox": "^0.10.1",
    "@reach/tabs": "^0.10.1",
    "@reduxjs/toolkit": "1.3.5",
    "axios": "0.19.2",
    "classnames": "2.2.6",
    "cropperjs": "1.5.6",
    "formik": "2.1.4",
    "history": "4.10.1",
    "i18next": "19.4.4",
    "i18next-browser-languagedetector": "4.1.1",
    "lodash": "4.17.15",
    "moment": "2.25.3",
    "qs": "6.9.4",
    "rc-slider": "8.7.1",
    "react": "16.13.1",
    "react-cropper": "1.3.0",
    "react-dom": "16.13.1",
    "react-google-login": "5.1.14",
    "react-i18next": "11.4.0",
    "react-media-match": "1.10.2",
    "react-redux": "7.2.0",
    "react-router": "5.1.2",
    "react-router-dom": "5.1.2",
    "react-scripts": "3.4.1",
    "react-select": "3.1.0",
    "react-toastify": "5.5.0",
    "reactjs-popup": "1.5.0",
    "redux": "4.0.5",
    "styled-components": "5.1.0",
    "yup": "0.28.5",
    "tailwindcss": "1.4.6"
  },
  "devDependencies": {
    "babel-plugin-macros": "2.8.0",
    "eslint": "7.0.0",
    "eslint-config-airbnb": "18.1.0",
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-prettier": "3.1.3",
    "husky": "4.2.5",
    "lint-staged": "10.2.2",
    "prettier": "2.0.5",
    "stylelint": "13.3.3",
    "stylelint-config-css-modules": "2.2.0",
    "stylelint-config-prettier": "8.0.1",
    "stylelint-config-recommended": "3.0.0",
    "stylelint-prettier": "1.1.2",
    "@storybook/addon-a11y": "5.3.18",
    "@storybook/addon-actions": "5.3.18",
    "@storybook/addon-centered": "5.3.18",
    "@storybook/addon-docs": "5.3.18",
    "@storybook/addon-knobs": "5.3.18",
    "@storybook/addon-links": "5.3.18",
    "@storybook/addon-storyshots": "5.3.18",
    "@storybook/addon-storysource": "5.3.18",
    "@storybook/addon-viewport": "5.3.18",
    "@storybook/addons": "5.3.18",
    "@storybook/preset-create-react-app": "2.1.1",
    "@storybook/react": "5.3.18",
    "flow-bin": "0.124.0",
    "jest-localstorage-mock": "2.4.2",
    "storybook-react-router": "1.0.8"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "babelMacros": {
    "styledComponents": {
      "pure": true
    }
  }
}
misha-erm commented 4 years ago

So here is my repro-repository https://github.com/MikeYermolayev/cra-docker-repro but I wasn't able to reproduce the issue. Such a bummer. Spent a day already trying to figure out why it doesn't work in my project.

Thanks in advance for any help or tips where to look

misha-erm commented 4 years ago

Here are some logs of node_modules of react-scripts in docker environment:

Step 14/21 : RUN ls -al ./node_modules/react-scripts
 ---> Running in 9410462fc34a
total 84
drwxr-xr-x    9 root     root          4096 May 10 08:23 .
drwxr-xr-x 1107 root     root         36864 May 10 08:23 ..
-rw-r--r--    1 root     root          1080 Oct 26  1985 LICENSE
-rw-r--r--    1 root     root           415 Oct 26  1985 README.md
drwxr-xr-x    2 root     root          4096 May 10 08:23 bin
drwxr-xr-x    3 root     root          4096 May 10 08:23 config
drwxr-xr-x    2 root     root          4096 May 10 08:23 lib
drwxr-xr-x   11 root     root          4096 May 10 08:23 node_modules
-rw-r--r--    1 root     root          3235 Oct 26  1985 package.json
drwxr-xr-x    3 root     root          4096 May 10 08:23 scripts
drwxr-xr-x    2 root     root          4096 May 10 08:23 template
drwxr-xr-x    2 root     root          4096 May 10 08:23 template-typescript
Removing intermediate container 9410462fc34a
 ---> 47a4c9d446ab
Step 15/21 : RUN ls -al ./node_modules/react-scripts/node_modules
 ---> Running in 19872e8fe8b6
total 44
drwxr-xr-x   11 root     root          4096 May 10 08:23 .
drwxr-xr-x    9 root     root          4096 May 10 08:23 ..
drwxr-xr-x    2 root     root          4096 May 10 08:23 .bin
drwxr-xr-x    4 root     root          4096 May 10 08:23 debug
drwxr-xr-x    6 root     root          4096 May 10 08:23 eslint
drwxr-xr-x    2 root     root          4096 May 10 08:23 eslint-utils
drwxr-xr-x    2 root     root          4096 May 10 08:23 globals
drwxr-xr-x    2 root     root          4096 May 10 08:23 import-fresh
drwxr-xr-x    2 root     root          4096 May 10 08:23 ms
drwxr-xr-x    2 root     root          4096 May 10 08:23 regexpp
drwxr-xr-x    2 root     root          4096 May 10 08:23 resolve-from
Removing intermediate container 19872e8fe8b6

As you can see eslint dependency is there but still CRA tries to use global one for some reasons

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale[bot] commented 4 years ago

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.